如何使用jQuery UI的droppable來排序和創建多個文本字段？

Question

場景：我希望我的用戶能夠通過將產品拖放到可排序列表&可排序列表中來創建購物列表。根據產品在列表中的位置以及產品的價值，必須填寫此表單的文本字段。

的jsfiddle：http://jsfiddle.net/imjp/5NWAQ/1/

例如：

• 橙色
• 蘋果
• 香蕉

生成我的表單字段中輸入以下值（基於當然對data-product attribute）：

• ITEM_1：橙色
• ITEM_2：蘋果
• ITEM_3：香蕉

如果我中移動的蘋果後，該領域還必須更新此。

下面是一些HTML我已經把：

<div class="demo"> 

<div id="products"> 
<h1 class="ui-widget-header">Products</h1>  
<div id="catalog"> 
    <h3><a href="#">T-Shirts</a></h3> 
    <div> 
     <ul> 
      <li data-product="Lolcat Shirt">Lolcat Shirt</li> 
      <li data-product="Cheezeburger Shirt">Cheezeburger Shirt</li> 
      <li data-product="Buckit Shirt">Buckit Shirt</li> 
     </ul> 
    </div> 
    <h3><a href="#">Bags</a></h3> 
    <div> 
     <ul> 
      <li>Zebra Striped</li> 
      <li>Black Leather</li> 
      <li>Alligator Leather</li> 
     </ul> 
    </div> 
    <h3><a href="#">Gadgets</a></h3> 
    <div> 
     <ul> 
      <li>iPhone</li> 
      <li>iPod</li> 
      <li>iPad</li> 
     </ul> 
    </div> 
</div> 
</div> 

<div id="cart"> 
<h1 class="ui-widget-header">Shopping Cart</h1> 
<div class="ui-widget-content"> 
    <ol> 
     <li class="placeholder">Add your items here</li> 
    </ol> 
</div> 
</div> 
<div id="cart"> 
<h1 class="ui-widget-header">Shopping Cart</h1> 
<div class="ui-widget-content"> 
    <ol> 
     <li class="placeholder">Add your items here</li> 
    </ol> 
</div> 
</div> 


<div id="list_1" style="clear: both; float: left;"> 
    <h3>List 1</h3> 
<input id="list_1_item_1" type="text"> 
<input id="list_1_item_2" type="text"> 
</div> 

<div id="list_2" style="clear: both; float: left;"> 
     <h3>List 2</h3> 
    <input id="list_2_item_1" type="text"> 
<input id="list_2_item_2" type="text"> 
</div> 
</div><!-- End demo --> 

的JavaScript（記住，JavaScript代碼是不工作像我想它，它更新所有具有相同值的字段）：

$("#catalog").accordion(); 
    $("#catalog li").draggable({ 
     appendTo: "body", 
     helper: "clone" 
    }); 
    $("#cart ol").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      $(this).find(".placeholder").remove(); 
      console.log(ui.draggable.length); 
    $('#list_1_item_1').val(ui.draggable.data('product')); 
    $('#list_1_item_2').val(ui.draggable.data('product')); 

    $('#list_2_item_1').val(ui.draggable.data('product')); 
    $('#list_2_item_2').val(ui.draggable.data('product')); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      // gets added unintentionally by droppable interacting with sortable 
      // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 

Answer 1

據我瞭解，你需要能夠動態地創建/更新輸入字段時：

一）項拖動並從物品掉落手風琴任何車

二）項內任何車的重新排序（可排序）

檢查這個搗鼓實施：http://jsfiddle.net/CzKn9/3/

在你的小提琴，我可以看到你所使用的相同id正確多個元素（2個元素與id'購物車'）。這是你應該避免的，因爲id屬性被設計爲唯一標識DOM樹中的一個元素。 （例如，如果您執行document.getElementById('x')且多個元素的ID爲'x'，則只會獲得與該ID匹配的第一個元素）。我修改了你的代碼來糾正這個問題。

其次，我添加了一個函數，用於在每次拖放或排序事件時重新創建輸入字段（將提交表單到服務器時提交）。創建的輸入字段的ID爲list_1_item_1，list_1_item_2,list_2_item_1，list_1_item_2等。

希望這會有所幫助。

UPDATE

ID指數增量加入。檢查這個小提琴：http://jsfiddle.net/CzKn9/4/

Answer 2

試試這個小提琴：

http://jsfiddle.net/5NWAQ/5/

使用可排序的停止事件檢索最頂層的li值並將其添加到輸入。