Jquery UI 可排序多个项目几乎可以工作，但还有一个问题答案

【问题标题】：Jquery UI Sortable multiple items almost working but one remaining issueJquery UI 可排序多个项目几乎可以工作，但还有一个问题
【发布时间】：2013-02-04 22:22:18
【问题描述】：

我有两个连接的可排序对象，在这些对象之间拖动可以正常工作。我需要一次拖动多个，所以我使用以下类似的方法来完成它，将选定的项目附加到 event.item。

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

我无法弄清楚的问题是，当没有将鼠标悬停在两个放置区域之一上时，占位符最终会出现在我拖动的元素中。如果你在这个时候放手，它们就会消失。

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

这很有意义，但我不知道解决方案是什么，感谢任何帮助！

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案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/

【讨论】：

【解决方案2】：

你应该在启动函数中添加$(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" );}
...

【讨论】：