Jquery draggable: scrolling in droppable using hel

问题:

I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:

<div id="container">
<div id="left-pane" class="pane">
    <div class="item">Item A</div>
    <div class="item">Item B</div>
    <div class="item">Item C</div>
    <div class="item">Item D</div>
</div>

<div id="right-pane" class="pane">
    <div class="item">Item E</div>
    <div class="item">Item F</div>
    <div class="item">Item G</div>
    <div class="item">Item H</div>
</div>

​

$('.item').draggable({
    helper: 'clone',
    appendTo: '#contentpane',
    cursor: 'move'
});
$('.item').droppable();

The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.

When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example

回答1:

Be able to use the scroll features from different container is really not easy to do.

I opended a topic on this subject. You will find an edit of the question with a functionnal workaround. Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table

About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/

回答2:

Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.