3

所以我有一个嵌套的 jqueryui 可排序和一个可拖动的项目，我可以将副本拖动到任何可排序的级别。

在此处查看 jsfiddle http://jsfiddle.net/rmossuk/JUnA7/4/

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

新物品

问题是当我将 NewItem 拖入嵌套可排序（ Item3 ）时，接收事件被调用 3 次。一次用于可排序的产品，出于某种原因两次用于可排序的 Item3 !!??

我需要它以便只调用 Item3 可排序接收事件而不是其他 2。

请问有人知道怎么做吗？？

多谢

4

3 回答 3

0

嘿，如果您可以在使用 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>

查询

 $(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

于 2012-08-30T18:03:40.010 回答
0

该错误是由于 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
    });
});​

更新

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

    start: function(event, ui) {
        dropCount=0;   
        var placeholders=0;
        $(".ui-sortable-placeholder").each(function(){
            placeholders=placeholders+1;                
            if(placeholders>1)
                $(this).height(0);
        });
    }
于 2012-09-20T20:25:55.520 回答
0

我认为您需要防止事件传播，例如：

  event.stopPropagation();

我使用 jsfiddle 在几个地方快速尝试了它，但它没有立即工作，因此您可能需要编写更多代码。

于 2012-09-21T07:42:33.987 回答