jQuery的可拖动：滚动在投掷的使用帮手“克隆”和appendTo

我起诉jQuery用户界面，可其他项目的.droppable名单上被删除的项目列表上拖动。这里有一个jsFiddle显示我想要做的事：jQuery的可拖动：滚动在投掷的使用帮手“克隆”和appendTo

<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”的小提琴例子

来源

2012-11-21 Guillaume

+1'appendTo'，我不知道这个属性和它帮助我巨大的一个项目，我的工作！ – chiliNUT

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

来源

2013-04-22 12:46:55 Guillaume

在哪个事件，你正在检测的位置？ '拖动'？ –

可以使用滚动功能从不同的容器真的很不容易去做。

我公开了一个关于这个问题的话题。你会发现一个函数解决方法的问题编辑。检查此相关问题：JqueryUI, drag elements into cells of a scrolling dropable div containing large table

关于您最后的评论，您可以使用sortable属性将您的项目放在列表的繁荣处。 http://jqueryui.com/sortable/

来源

2012-11-22 06:45:52 sdespont

感谢您的回复。我有另一个可排序的列表，但这个我不希望它是可排序的，这就是为什么我只使用可丢弃的 – Guillaume

你的解决方案并不坏，但是当拖动一个元素并尝试在任何地方甚至在拖放区（“#container”），滚动发生在拖放区，这有点奇怪 – Guillaume

jQuery的可拖动：滚动在投掷的使用帮手“克隆”和appendTo

回答

相关问题