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

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

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

Answer 1

能够使用来自不同容器的滚动功能真的不容易。

我在这个主题上开了一个主题。您将通过功能解决方法找到问题的编辑。请查看以下相关问题：JqueryUI, drag elements into cells of a scrolling dropable div containing large table

关于您的上一句话，您可以使用sortable属性将项目放在列表的繁荣中。 http://jqueryui.com/sortable/

Answer 2

我发现这样做的唯一方法是检测拖动元素的位置并滚动可放置的容器，并使用平滑的效果，使其像从鼠标滚轮一样滚动。

Jquery draggable：使用帮助器'clone'和appendTo在droppable中滚动

2 个答案: