3

したがって、ネストされた jqueryui ソート可能アイテムと、コピーを任意のレベルのソート可能アイテムにドラッグできるドラッグ可能なアイテムがあります。

ここでjsfiddleを参照してくださいhttp://jsfiddle.net/rmossuk/JUnA7/4/

  • 製品
    • アイテム1
    • アイテム2
    • アイテム3
      • アイテム5
      • アイテム6
    • アイテム4

新商品

問題は、 NewItem をネストされたソート可能 ( Item3 ) にドラッグすると、受信イベントが 3 回呼び出されることです。1 回は product sortable に、なぜか 2 回は Item3 sortable に !??

Item3のソート可能な受信イベントだけが呼び出され、他の2つは呼び出されないようにする必要があります。

誰もこれを行う方法を知っていますか??

どうもありがとう

4

3 に答える 3

0

このエラーは、div.sortableを別のdiv.sortableにネストした結果であるため、新しい要素をドロップすると、ソートが2回発生します。私が思いついた回避策は、特定のドロップで追加された要素の数を数え、「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

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>

Jクエリ

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

次のような場所でイベントの伝播を防ぐ必要があると思います。

  event.stopPropagation();

jsfiddle を使用していくつかの場所ですばやく試してみましたが、すぐには機能しなかったため、さらにコードを記述する必要がある場合があります。

于 2012-09-21T07:42:33.987 に答える