jQuery可拖動後拖放不可拖動

我有兩個div，每個包含數量和項目的列表。這些項目是可拖動的，並且包含項目的div可以放置。如果同一名稱的項目出現在該div中，則該項目不能再次放在該div上。最終，我將控制移動的項目數量，但我只是試圖讓這部分工作。jQuery可拖動後拖放不可拖動

我遇到的問題是，一旦我在div上放置一個項目，我不能再拖動它。我試着將draggable（）添加到我正在創建的新項目中，但這隻會讓事情變得很奇怪。

當我將一個li添加到ul中時，完全相同的代碼有效，但我只想移動該項目的名稱而不是數量，所以我使用div而不是li。

這裏是我的代碼的jsfiddle：http://jsfiddle.net/imjustabill/eJ4KH/

這裏是有關部分

 $(function() { 
     $("#inventory1 .item").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#inventory2").droppable({ 
      drop: function (event, ui) { 
       var item = ui.draggable.attr("data-item"); 
       var qty = ui.draggable.attr("data-qty"); 
       var itemDesc = ui.draggable.text(); 
       if (!$(this).find("[data-item='"+item+"']").length) { 
        $("<div class='qty'></div>").text(qty).appendTo(this); 
        $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this); 
       } 
      } 
     }); 

     $("#inventory2 .item").draggable({ 
      appendTo: "body", 
      helper: "clone" 
     }); 
     $("#inventory1").droppable({ 
      drop: function (event, ui) { 
       var item = ui.draggable.attr("data-item"); 
       var qty = ui.draggable.attr("data-qty"); 
       var itemDesc = ui.draggable.text(); 
       if (!$(this).find("[data-item='"+item+"']").length) { 
        $("<div class='qty'></div>").text(qty).appendTo(this); 
        $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).appendTo(this); 
       } 
      } 
     }); 
    }); 

<div id="inventory1"> 
<h4>Inventory 1</h4> 
    <div class="qty">7</div><div class="item" data-qty="7" data-item="item1">Item 1</div> 
    <div class="qty">5</div><div class="item" data-qty="5" data-item="item2">Item 2</div> 
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item3">Item 3</div> 
    <div class="qty">9</div><div class="item" data-qty="9" data-item="item4">Item 4</div></div> 

<div id="inventory2"> 
<h4>Inventory 2</h4> 
    <div class="qty">4</div><div class="item" data-qty="4" data-item="item1">Item 1</div> 
    <div class="qty">2</div><div class="item" data-qty="2" data-item="item5">Item 5</div></div>

任何想法？謝謝。

來源

2013-12-13 user1118374

問題是，Draggable在drop中調用它的destroy（），所以你失去了拖動的能力。一個骯髒的方法是讓你的下降元素再次拖動：

$("#inventory2").droppable({ 
    drop: function (event, ui) { 
    var item = ui.draggable.attr("data-item"); 
    var qty = ui.draggable.attr("data-qty"); 
    var itemDesc = ui.draggable.text(); 
    if (!$(this).find("[data-item='"+item+"']").length) { 
     $("<div class='qty'></div>").text(qty).appendTo(this); 
     $("<div class='item ui-draggable' data-qty='"+qty+"' data-item='"+item+"'></div>").text(itemDesc).draggable({appendTo: "body", helper: "clone"}).appendTo(this); 
    } 
    } 
});

但它不會被再次丟棄。

您是否需要使用可拖放/可拖放？只需使用jQueryUI自己的可用連接列表排序。它已經完美實現了jQueryUI： jQueryUI Sortable with connected lists

來源

2013-12-13 22:55:22

這是完美的。它完美的作品。它似乎再次被丟棄。不是用我目前的代碼，因爲我不允許重複，但從長遠來看，這不是我想要的行爲。一旦我拿出了它獨特的要求，它就完美運作了。謝謝！ – user1118374

我對你的回答有個疑問，如果你真的那麼友善。我嘗試通過更改我創建的新div的代碼來使拖動元素可拖動：$（「

」）.text（itemDesc）.draggable（）。appendTo（this）;'但它給了很奇怪的結果。爲什麼你的工作？ – user1118374

@ user1118374你忘了傳遞你的設置'{appendTo：「body」，helper：「clone」}'。你的元素應該是可拖動的而不傳遞它，但jQueryUI會搞亂定位和Domtree，因爲它使用了一些不符合你的Domtree和stylesettings的標準設置。 '$（「

」）.text（itemDesc）.draggable（{appendTo：「body」，helper：「clone」}）。appendTo（this）;'應該再次正常工作。 –

jQuery可拖動後拖放不可拖動

回答

相關問題