Geek Answers Handbook

JQuery UI draggable does not scroll sortable container

I have some draggable items (#draggable li) that I drag and sort them into sortable (#sortable).

Sort is wrapped with two divs, and the outer div has overflow-y: scroll. The drag and drop mechanism works fine until the sorted list expands and scrolls.

When I try to drag and drop an element in a sortable one directly, I cannot make the sortable scroll bar scroll automatically the way I want (say, I want to rise to go above the first element or go down to fall below the last element). But when I try to drag and sort the items together, the scrollbar scrolls while dragging.

Is this a bug or is there a bug how my code works.

Here is the complete code:

<body> <ul id="draggable" class="connectedSortable"> <li class="ui-state-default big">Item 1</li> <li class="ui-state-default big">Item 2</li> <li class="ui-state-default big">Item 3</li> <li class="ui-state-default big">Item 4</li> <li class="ui-state-default big">Item 5</li> <li class="ui-state-default big">Item 6</li> </ul> <div id="outerDiv"> <div id="innerDiv"> <ul id="sortable" class="connectedSortable"> </ul> </div> </div> </body>

// CSS

 #sortable, #draggable { list-style-type: none; margin: 0; padding: 0 0 2.5em; margin-right: 10px; } #sortable li, #draggable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } .marker{ background: none repeat scroll 0 0 #DDDDDD; border-bottom: 1px solid #BBBBBB; border-top: 1px solid #BBBBBB; display: block; height: 20px; width: 100%; text-align: center; vertical-align: middle; color: #666; font-size: 18px; font-style: italic; } #outerDiv{ background: none repeat scroll 0 0 #EEEEEE; height: 100%; right: 0; position: absolute; overflow-y: scroll; top: 0; width: 300px; } #innerDiv{ border: 1px solid #CCCCCC; min-height: 400px; position:absolute; } #sortable{ width: 200px; padding: 10px; border : 1px solid black; min-height: 230px; } #draggable{ position:absolute; top:0; left:0; } .big{ height: 80px; }

// JS

 $(function() { $( "#sortable" ).sortable({ placeholder: "marker", axis: "y", }); $("#draggable li").draggable({ helper: "clone", cursor: "move", revert: "invalid", revertDuration: 500, connectToSortable: "#sortable" }); });

demo on the violin http://jsfiddle.net/8KDJK/21/

Any help would be greatly appreciated. Thanks:)

+4
source share
2 answers

I am not sure if this is a mistake, but this is not a classic scenario.

I spent a lot of time finding a workaround a few months ago, and here is my solution: http://jsfiddle.net/8KDJK/23/

It has been working for several months without problems.

The idea is to add a clone of the element to the scrollable container, delaying the helper construct callback, and then add the helper to the body using the setTimeout function after 1 ms so that you can drag everything around the web page.

  $("#draggable li").draggable({ cursor: "move", revert: "invalid", revertDuration: 500, connectToSortable: "#sortable", //Here is the workaround //********************** containment: 'body', helper: function(){ //Hack to append the element to the body (visible above others divs), //but still bellonging to the scrollable container $('#sortable').append('<div id="clone" class="ui-state-default big">' + $(this).html() + '</div>'); $("#clone").hide(); setTimeout(function(){ $('#clone').appendTo('body'); $("#clone").show(); },1); return $("#clone"); } });

Link to my previous question: JqueryUI, drag items into cells of a scrollable dropable div containing a large table

+6
source

Decision:

Do not use overflow: auto;

But

overflow: visible;

+2
source

More articles:


All Articles