jQuery的可拖动：使用帮手“克隆”和appendTo在滚动投掷的 [英] Jquery draggable: scrolling in droppable using helper 'clone' and appendTo

问题描述

我起诉jQuery用户界面，可以其他项目的.droppable名单上被删除的项目列表上拖动。这里有一个的jsfiddle 以显示我想要做的：

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

窗格有一个固定的高度，而溢出-Y：汽车，这样我们可以在里面滚动查看隐藏的元素

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

当从列表中拖动一个元素，另外，列表不会滚动，因为我使用appendTo和拖动项目不在列表中。有没有办法让名单滚动时，我在拖动项目？否则它是不可能在列表的底部，放下该项目，比方说在项目H'降'A项在捣鼓例如

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

推荐答案

好吧，我发现这样做是为了检测拖动的元素的位置和滚动投掷的容器，具​​有流畅的效果，这样滚动的唯一途径像鼠标滚轮这样做。

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.

这篇关于jQuery的可拖动：使用帮手“克隆”和appendTo在滚动投掷的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！