JQueryソート可能なネストされたソート可能なdivs

この質問はこの1つと関係があるNest jQuery UI sortables、しかし私はそれで私の問題を解決できませんでした。JQueryソート可能なネストされたソート可能なdivs

ここに問題があります：アイテムを含むメインコンテナがあります。これらのアイテムはグループ化されていないアイテムやグループで、他のアイテムを含むdivです。 .multiply-group divをドラッグして新しいグループを定義すると、すべてのグループを一度にドラッグできます。私は、メイン容器の底部の外に最後グループコンテナをドラッグすると、それは代わりに、そこに停止しているhttps://jsfiddle.net/antoq/n1w6e6ar/2/

問題は、私が取得することである。ここでは、コードです：

<body> 
    <div class="multiply-container"> 
     <div class="row multiply">Item 1</div> 
     <div class="row multiply">Item 2</div> 
     <div class="row multiply">Item 3</div> 
     <div class="row multiply-group"> Group 1</div> 
     <div class="row multiply">Item 4</div> 
     <div class="row multiply-group"> Group 2 </div> 
     <div class="row multiply">Item 5</div> 
    </div> 

    <script> 

     var groupWrap = function(){ 

      $('.multiply-container').children().each(function(index, item){ 
       if($(item).hasClass('multiply-group')){ 
        $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>'); 
       } 
      }); 

     }; 

     var updateMultiply = function(){ 

      var $container = $('.multiply-container'); 

      $container.children().each(function(index, item){ 
       if($(item).hasClass('locked')){ 
        $(item).children().each(function(i, elem){ 

         $container.append($(elem)); 

        }); 
        $(item).remove(); 
       } 


      }); 

      groupWrap(); 

      $('.multiply-container').sortable({ 
       connectWith: '.locked', 
       helper: 'clone', 
       placeholder: '.multiply-placeholder', 
       axis: 'y', 
       update: function(){ 
        updateMultiply(); 
       } 
      }); 

      $('.locked').sortable({ 
       connectWith: '.multiply-container, .locked', 
       helper: 'clone', 
       axis: 'y', 
       update: function(){ 
        updateMultiply(); 
       }, 
       receive: function(event, ui){ 

        if($(ui.item).hasClass('locked')){ 
         $(ui.sender).sortable('cancel'); 

         return false; 
        } 

       } 
      }); 

     }; 




     updateMultiply(); 

    </script> 

</body>

そして、ここフィドルですメインコンテナに戻ると次のエラーが表示されます。

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

問題の解決方法と解決方法を教えてください。最後のグループを持つなど2 sortables、イベントの不要なキャンセル、すでに接続された接続リスト、

問題が一番下に立ち往生かに見えた消える：あなたはそれをコード化する際

出典

2016-02-05 António Quadrado

私はすべての問題が表示されません。正確にそれを再現するためのステップは何ですか？ – Thangaraja

これも再現できません。どのブラウザを使用していますか？ – Ageonix

私は2つの奇妙な振る舞いを見ることができます。1）青色の枠線をハンドルとして使用して「グループ2」をドラッグすると、緑色のコンテナが崩壊することがよくあります。その緑色の容器の外にグループをドロップすると、ソートが中断されます。グループは下にとどまります。 2）青い枠線をハンドルとして使用して「グループ2」をドラッグし、「グループ1」内にドロップすると、「グループ2」が完全に消滅します。 –

はたぶん、あなたはそれをoverthinkingましたすべてのリストの更新時に.sortable()を再接続するという問題であり、予期しない動作のために繰り返されます。しかし、単にその再発を削除すると、そのいくつかの追加のリファクタリングが必要だった、あなたは一見にそれを意図したとおりに、あなたのリストは動作しない作られた：

1）一つだけ.sortable()呼び出しを使用し、その後、（ソート可能になるアイテム個々のために、すなわち.rowと.lockedを定義しますグループ化ソート）。それはすでにあなたが意図したものに十分です。ここでの唯一の問題は、グループを別のグループの中央にドラッグすると、別の入れ子レベルが追加されたことです。

2）追加のネストレベルを防止するには、グループを再度ラップする前に.lockedグループのラップを解除します。

var groupWrap = function() { 
 
    $('.locked').children().unwrap(); 
 
    $('.multiply-container') 
 
    .children().each(function(index, item) { 
 
     if ($(item).hasClass('multiply-group')) { 
 
     $(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>'); 
 
     } 
 
    }); 
 
}; 
 

 
var updateMultiply = function() { 
 

 
    var $container = $('.multiply-container'); 
 

 
    $container.children().each(function(index, item) { 
 
    if ($(item).hasClass('locked')) { 
 
     $(item).children().each(function(i, elem) { 
 

 
     $container.append($(elem)); 
 

 
     }); 
 
     $(item).remove(); 
 
    } 
 
    }); 
 
}; 
 

 
$('.multiply-container').sortable({ 
 
    items: '.row, .locked', 
 
    helper: 'clone', 
 
    axis: 'y', 
 
    update: function() { 
 
    update(); 
 
    } 
 
}); 
 

 
var update = function() { 
 
    updateMultiply(); 
 
    groupWrap(); 
 
}; 
 

 
update();

body { 
 
    background-color: #eee; 
 
    padding: 50px; 
 
} 
 
.multiply { 
 
    height: 45px; 
 
    width: 100%; 
 
    background-color: violet; 
 
    border: 1px solid purple; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.multiply-group { 
 
    height: 25px; 
 
    width: 100%; 
 
    background-color: teal; 
 
    border: 2px solid orange; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.multiply-container { 
 
    background-color: lime; 
 
    padding: 20px; 
 
} 
 
.multiply-placeholder { 
 
    height: 65px; 
 
    width: 100%; 
 
} 
 
.locked { 
 
    padding: 20px; 
 
    background-color: cyan; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
<body> 
 
    <div class="multiply-container"> 
 
    <div class="row multiply">Item 1</div> 
 
    <div class="row multiply">Item 2</div> 
 
    <div class="row multiply">Item 3</div> 
 
    <div class="row multiply-group">Group 1</div> 
 
    <div class="row multiply">Item 4</div> 
 
    <div class="row multiply-group">Group 2</div> 
 
    <div class="row multiply">Item 5</div> 
 
    </div> 
 
</body>

出典

2016-02-06 00:13:58

本当にありがとうございました！ –

JQueryソート可能なネストされたソート可能なdivs

答えて

関連する問題