如何使用 jQuery UI 的 droppable 排序和创建多个文本字段？

设想：我希望我的用户能够通过将产品拖到可放置和可排序的列表中来创建购物清单。根据产品在列表中的位置以及产品的价值，必须填充此表单的文本字段。

jsFiddle: http://jsfiddle.net/imjp/5NWAQ/1/ http://jsfiddle.net/imjp/5NWAQ/1/

例如：

• Orange
• Apple
• Banana

在我的表单字段中生成以下值（当然基于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" );
        }
    });

据我了解，您需要能够在以下情况下动态创建/更新输入字段：

a）将项目从手风琴项目拖放到任何推车中

b) 物品在任何购物车中重新排序（可排序）

检查这个小提琴的实现：http://jsfiddle.net/CzKn9/3/ 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/ http://jsfiddle.net/CzKn9/4/