I have two lists in which using jQuery sortable i can move the items between them.

$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();

However I run into a problem when i want to use custom scroll bar and set overflow:hidden; on the two lists. I want them to be with max-height:400px. If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar. Can anyone suggest a solution.

thanks

I have two lists in which using jQuery sortable i can move the items between them.

$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();

However I run into a problem when i want to use custom scroll bar and set overflow:hidden; on the two lists. I want them to be with max-height:400px. If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar. Can anyone suggest a solution.

thanks

• javascript
• jquery
• html
• css

• 1 If you could get a working model on JSFiddle, that would help a lot. – frosty Commented May 27, 2012 at 6:38
• here is a simple representation jsfiddle/cCDcQ as you can see dragging the text out will be hidden and i need to make it visible (i use custom scrollbar which requires overflow: hidden;) – BlitzCrank Commented May 27, 2012 at 6:56

2 Answers 2

If you remove the style position:relative from your lists is seems to work as you want it to.

http://jsfiddle/cCDcQ/2/

Edit:

I would have thought that using the appendTo option would fix this issue and I was right. After a bit more fiddling, I got it to work. This way, you can keep the position:relative if you need it.

http://jsfiddle/cCDcQ/4/

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() );

With this fix in place, I specified an appendTo that targeted the div that contained both Sortable's and ceased to have the overflow issue.

The plete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github./borgboyone/jQuery-UI-ScrollPane.

Cheers!