Jqueryui sortable的接收事件被多次调用

Question

我有一个嵌套的jQuery UI sortable和一个可拖动项目，我可以将其拖到任何级别的sortable中。

在这里查看jsfiddlehttp://jsfiddle.net/rmossuk/JUnA7/4/

• 产品
• • 项目1
• • 项目2
• • 项目3
• • • 项目5
• • • 项目6
• • 项目4

NewItem

问题是当我将NewItem拖入嵌套排序（Item3）时，接收事件会被调用3次。一次是针对产品sortable，另外两次则是针对Item3 sortable！？

我需要只调用Item3 sortable receive事件而不是其他2个。

请问有人知道如何做到这一点吗？

非常感谢

- Rick Moss

---

你可能想要想一个更具描述性的标题。 - j08691

让我检查一下我最近写的代码，很快就会回复你。 - Wearybands

Answer 1

嘿，我稍微修改了你的代码，如果你可以妥协使用ol和li，请尝试一下这段代码。

HTML

 <div class="container">Product1
    <ol class="sortable">
        <li>Item1</li>
        <li>Item2</li>
        <li name="to item3">Item3
           <ol>
                <li class="inner">Item5</li>   
                <li class="inner">Item6</li>  
           </ol>              
        </li>
        <li>Item4</li>
        <li name="new item moved">New Item</li>
    </ol>
 </div>

JQUERY

 $(document).ready(function(){
    $('ol.sortable').nestedSortable(
        {
            disableNesting: 'no-nest',
            forcePlaceholderSize: true,
            handle: 'div',
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            connectWith: '.sortable',
            stop: function(event, ui){
                var element = $(ui.item).attr("name");
                var parent = $(ui.item).parent().attr("name");
                alert(element);
                alert(parent);
           }
        });
   });

CSS

li {
   margin-left: 10px;
   margin-top: 10px;
}
.inner{
   margin-left: 40px;
}

不要忘记包含nestedsortable.js和最新的Jquery

- Wearybands

---

如果我的代码有问题，请看一下这个例子，它具有所有的拖放可能性：http://jsfiddle.net/jhogervorst/Ge7eK/9/ 希望能够帮到你。 - Wearybands

谢谢你的帮助，但我需要使用div。有没有一种方法可以用div来实现？ - Rick Moss

是的，您可以尝试使用divs，我没有用divs尝试过。但是您可以尝试一下，并相应地更改js。 - Wearybands

太好了，但我需要将项目复制到可排序列表中，而不仅仅是从一个列表移动到另一个列表。你知道怎么做吗？谢谢。 - Rick Moss

复制项目是什么意思？ - Wearybands

我使用可拖动的原因是想要拖动可拖动项的克隆并将其放入嵌套的可排序列表中。您提供的解决方案使用了两个可排序列表，当我将一个项目从一个列表移动到另一个列表时，该项目会从一个列表移动到另一个列表。我需要被拖动的原始项目留在其列表中，并将其副本放入另一个列表中。希望您能帮忙解决这个问题？非常感谢。 - Rick Moss

Answer 2

这个错误是由于一个 div.sortable 嵌套在另一个 div.sortable 中，因此当您放置一个新元素时，它会触发两次排序。我想出的解决方法只是计算特定拖放中添加的元素数量，并将一个名为“deleteMe”的类添加到重复项中。

然后，在排序结束时，只需调用 $(".deleteMe").remove() 来删除多余的元素。

虽然不是理想的解决方案，但对我来说似乎可以工作。http://jsfiddle.net/JUnA7/72/

$(function() {
    var dropCount=0;
    $(".sortable").sortable({
        connectWith: ".sortable",
        cursor: 'pointer',
        receive: function(event, ui) {
            dropCount=dropCount+1;
            if(dropCount>1)
                $(ui.item).addClass("deleteMe");
            console.log(dropCount);
        },
        start: function(event, ui) {
            dropCount=0;   
            var placeholders=0;
            $(".ui-sortable-placeholder").each(function(){
                placeholders=placeholders+1;                
                if(placeholders>1)
                    $(this).height(0);
            });
        },
        stop: function(event, ui) {
            $(".deleteMe").remove();
            dropCount=0;   
        }
    });
    $(".draggable").draggable({
        handle: ".icon-move",
        connectToSortable: ".sortable",
        appendTo: "body",
        helper: 'clone',
        distance: 30
    });
});​

更新

另外，我注意到排序占位符也是重复的...所以我通过将它们的高度设置为0像素来删除了重复项。

    start: function(event, ui) {
        dropCount=0;   
        var placeholders=0;
        $(".ui-sortable-placeholder").each(function(){
            placeholders=placeholders+1;                
            if(placeholders>1)
                $(this).height(0);
        });
    }

- Kaizen Programmer

Answer 3

我认为你需要在某个地方阻止事件传播，例如：

  event.stopPropagation();

我在几个地方用jsfiddle快速尝试了一下，但是它并没有立即工作，所以你可能需要编写更多的代码。

- Glenn Plas