jquery-ui - Jquery 可拖动 : scrolling in droppable using helper 'clone' and appendTo

Question

我在可以拖放到其他项目的 .droppable 列表中的项目列表上起诉 jquery ui draggable。这是一个 jsFiddle展示我正在尝试做的事情:

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

Pane 具有固定高度和 overflow-y: auto 以便我们可以滚动到内部以查看隐藏的元素。

当将一个元素从一个列表拖到另一个时，列表不会滚动，因为我使用了 appendTo 并且拖动的项目不在列表中。当我拖动一个项目时，有没有办法让列表“可滚动”？否则不可能将项目放在列表底部，假设在 fiddle 示例中将“项目 A”放在“项目 H”上

Answer 1

能够在不同的容器中使用滚动特性，真的很不容易。

我打开了一个关于这个主题的主题。您将找到具有功能性解决方法的问题编辑。 检查此相关问题:JqueryUI, drag elements into cells of a scrolling dropable div containing large table

关于您的最后一句话，您可以使用 sortable 属性将您的项目放在列表的顶端。 http://jqueryui.com/sortable/