jQuery UIリスト間でのソート可能な要素の移動

Question

リストからアイテムを取得し、他の空のリストにドラッグしたいと考えています。

これは、HTMLの構造である：

<div class="structure"> 
    <div id="row1" class="connected"></div> 
    <div id="row2" class="connected"> 
    <div class="item">Item 1</div> 
    </div> 
    <div id="row3" class="connected"></div> 
    <div id="row4" class="connected"> 
    <div class="item">Item 2a</div> 
    <div class="item">Item 2b</div> 
    <div class="item">Item 2c</div> 
    </div> 
    <div id="row5" class="connected"></div> 
    <div id="row6" class="connected"> 
    <div class="item">Item 3a</div> 
    <div class="item">Item 3b</div> 
    </div> 
    <div id="row7" class="connected"></div> 
</div> 

あなたが任意の項目を置くことができるそれが他の項目をドラッグする前と後の新しい空の<ul>を作成した後という空の<ul>があります。

これが問題私のjavascriptの

$(function() { 
    $(".structure div").sortable({ 
    placeholder: "ui-state-highlight", 
    connectWith: ".connected", 
    items:  "> div", 

    receive:  function (event, ui) { 

     var targetRowID = $(this).attr("id"); 
     var itemsTargetRow = $("#"+ targetRowID +" .item").length; 

     if(itemsTargetRow == 1) { 
     function uniqueID() { 
      return Math.random().toString(36).substr(2, 5); 
     }; 

     $("#"+ targetRowID) 
      .before('<div id="row'+ uniqueID() +'" class="connected"></div>') 
      .after('<div id="row'+ uniqueID() +'" class="connected"></div>'); 
     } 
    }, 

    stop: function (event, ui) { 

     var fromRow = $(this).attr("id"); 
     var isRowEmpty = $("#"+ fromRow +" .item").length; 

     if(isRowEmpty == 0) 
     { 
     $("#"+ fromRow).next().remove(); 
     $("#"+ fromRow).remove(); 
     } 
    } 
    }).disableSelection(); 
}); 

です：

私は空のリストにアイテムをドロップすると、私はもうどこにもその項目をドラッグすることはできません。

アイデア？

Answer 1

OKここでjQueryのページロードで始まり、との「接続」にすべての領域を見つけ

あなたの問題があります。より多くのdivを追加すると、JQueryはドラッグアンドドロップを可能にする新しい領域があることを認識しません。

解決策？あなたはjQueryの、このようなsomehtingをリフレッシュする必要があります。

var refresh = function(){ 
    $(function() { 
    $(".structure div").sortable({ 
    placeholder: "ui-state-highlight", 
    connectWith: ".connected", 
    items:  "> div", 

    receive:  function (event, ui) { 

     var targetRowID = $(this).attr("id"); 
     var itemsTargetRow = $("#"+ targetRowID +" .item").length; 

     if(itemsTargetRow == 1) { 
     function uniqueID() { 
      return Math.random().toString(36).substr(2, 5); 
     }; 

     $("#"+ targetRowID) 
      .before('<div id="row'+ uniqueID() +'" class="connected"></div>') 
      .after('<div id="row'+ uniqueID() +'" class="connected"></div>'); 
     refresh(); 
     } 
    }, 

    stop: function (event, ui) { 

     var fromRow = $(this).attr("id"); 
     var isRowEmpty = $("#"+ fromRow +" .item").length; 

     if(isRowEmpty == 0) 
     { 
     $("#"+ fromRow).next().remove(); 
     $("#"+ fromRow).remove(); 
     } 
    } 
    }).disableSelection(); 
}); 
} 

が

ここでは、進行中の例の作業です： http://codepen.io/nilestanner/pen/grJJmJ

あなたはまた、より多くの助けのために、この答えを見ることができます： Refresh list after adding an item with jQuery UI sortable plugin