jQuery sortable and custom scroll bar

Question

I am using custom scrollbar in my webapp but I have the following problem:

http://jsfiddle.net/PVZB8/3056

As you can see when you drag an item out of the list it is invisible. I need to make it visible and to be original item because I have animation triggers bind to it.

You can understand more of what I am trying to do if you check this: jQuery sortable with overflow: hidden; between two lists

Answer 1

http://jsfiddle.net/PVZB8/3089/

This is just about the same fix as the last one so I'll try to break this down and explain a bit for ya:

The appendTo option is set to "BODY" so that it is not within the confines of your list's dimensions and hidden when it is dragged outside of them.

Because the the draggable is appended to the body when it's being dragged, it's no longer part of your UL style. This is why I added the extra classes to the LIs

Answer 2

I know this ticket is somewhat dated, but I had ran into the same issue while using my custom scrollbar solution and attempting to drag between Sortable's with overflow hidden. After adding code to fix-up Sortable to work with my Scrollpane, I noticed what appeared to be an omission for the appendTo functionality.

The code for appendTo only appends the helper to the target if it doesn't exist in the DOM. That's why the clone options works for some (but not for all and I won't go into that here). The key to fixing it was to add this code toward the end of the _mouseStart function of the widget:

if (!this.helper.parent().is(this.appendTo)) {
    this.helper.detach().appendTo(this.appendTo);
    // update position
    this.offset.parent = this._getParentOffset();
}

Note that this.appendTo is set-up earlier in the function:

this.appendTo = $( o.appendTo !== "parent" ?
        o.appendTo :
        this.currentItem.parent() );

The complete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github.com/borgboyone/jQuery-UI-ScrollPane. (Note: This fix-up has been made available to the jQuery-UI project via pull-request.)

Cheers!