Jquery UI可排序多个项目几乎可以工作，但剩下的一个问题

我有两个连接的可排序，拖动这些工作正常。 我需要一次拖动多个，所以我使用以下方法工作，将所选项目附加到event.item。

$(this).sortable({ connectWith: ".stage-content", placeholder: 'placeholder', start: function(ui, e) { e.item.siblings(".selected").appendTo(e.item); .... 

我无法弄清楚的问题，当没有hover在两个放置区域中的一个上时，占位符最终会在我拖动的元素内。 如果你现在放手，它们会消失。

HierarchyRequestError：无法在层次结构中的指定点插入节点

这是完全合理的，但我不知道解决方案是什么，任何帮助表示赞赏！

http://jsfiddle.net/mstefanko/kxBUG/

Answer 1

在底部是jsfiddle的例子。 希望这可以帮助。

 $(document).ready(function(){ $(".droppable").droppable({ drop: function(event, ui) { var $list = $(this); $helper = ui.helper; $($helper).removeClass("selected"); var $selected = $(".selected"); if($selected.length > 1){ moveSelected($list,$selected); }else{ moveItem(ui.draggable,$list); } }, tolerance: "touch" }); $(".draggable").draggable({ revert: "invalid", helper: "clone", cursor: "move", drag: function(event,ui){ var $helper = ui.helper; $($helper).removeClass("selected"); var $selected = $(".selected"); if($selected.length > 1){ $($helper).html($selected.length + " items"); } } }); function moveSelected($list,$selected){ $($selected).each(function(){ $(this).fadeOut(function(){ $(this).appendTo($list).removeClass("selected").fadeIn(); }); }); } function moveItem( $item,$list ) { $item.fadeOut(function() { $item.find(".item").remove(); $item.appendTo( $list ).fadeIn(); }); } $(".item").click(function(){ $(this).toggleClass("selected"); }); }); 

http://jsfiddle.net/caferdo/k5XJv/3/

Answer 2

您应该在启动function中添加$(YOUR SORTABLE OBJECT).sortable( "refresh" ) 。

 $(this).sortable({ connectWith: ".stage-content", placeholder: 'placeholder', start: function(ui, e) { e.item.siblings(".selected").appendTo(e.item); $(YOUR SORTABLE OBJECT).sortable( "refresh" );} ...