Jquery 可拖动:使用助手“克隆"和 appendTo 在 droppable 中滚动 [英] Jquery draggable: scrolling in droppable using helper 'clone' and appendTo

问题描述

我在一个项目列表上起诉 jquery ui draggable，这些项目可以放在其他项目的 .droppable 列表上.这是一个 jsFiddle 来展示我想要做什么:

<div id="left-pane" class="pane"><div class="item">项目 A</div><div class="item">Item B</div><div class="item">Item C</div><div class="item">项目 D</div>
<div id="右窗格" class="窗格"><div class="item">Item E</div><div class="item">Item F</div><div class="item">Item G</div><div class="item">Item H</div>

$('.item').draggable({帮手:'克隆'，appendTo: '#contentpane',光标:'移动'});$('.item').droppable();

窗格有固定的高度，并且 overflow-y: auto 这样我们就可以在里面滚动以查看隐藏的元素.

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

解决方案

好吧，我找到的唯一方法是检测拖动元素的位置并滚动可放置容器，使用平滑效果使其滚动喜欢用鼠标滚轮来做.

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

解决方案

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 在 droppable 中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！