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

Question

场景:我希望我的用户能够通过将产品拖到可放置和可排序的列表中来创建购物 list 。根据产品在列表中的位置和产品的值(value)，必须填充此表单的文本字段。

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

例如:

• 橙色
• 苹果
• 香蕉

在我的表单字段中生成以下值(当然基于 data-product 属性):

• 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

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

a) 项目从项目 Accordion 拖放到任何购物车

b) 项目在任何购物车中重新排序(可排序)

检查这个 fiddle 的实现:http://jsfiddle.net/CzKn9/3/

在您的 fiddle 中，我可以看到您在多个元素上使用了相同的 id 属性(2 个元素带有 id 'cart')。这是您应该避免的事情，因为 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 等。

希望这对您有所帮助。

更新

添加了 ID 索引增量。检查这个 fiddle :http://jsfiddle.net/CzKn9/4/