如何使用jQuery UI的droppable排序和创建多个文本字段? [英] How to sort and create multiple text fields with jQuery UI's droppable?

问题描述

方案:我希望我的用户能够通过将产品拖动到可投放的&可排序的列表.根据列表上产品的位置和产品的价值，必须填写此表单的文本字段.

Scenario: I'd like my users to be able to to create a shopping list by dragging products into a droppable & sortable list. Depending on the location of the product on the list, and the value of the product, the text fields for this form must be populated.

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

例如:

• 橙色
• 苹果
• 香蕉

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

Generates the following values in my form's fields (based of course on the data-product attribute):

• item_1:橙色
• item_2:苹果
• item_3:香蕉

如果我将苹果上移，则字段也必须对此进行更新.

If I move the apple up, the fields must also update this.

这是我整理的一些html:

Here's some html i've put together:

<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代码无法正常运行，它会以相同的值更新所有字段):

javascript (Keep in mind that the javascript code is not working like i want it to, it updates all of the fields with the same value) :

$( "#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" );
        }
    });

推荐答案

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

From what I understand, you need to be able to create/update input fields dynamically when:

a)将物品从手风琴中拖放到任何推车上

a) items are dragged and dropped from the items accordion to any of the carts

b)在任何购物车(可排序)中重新排序商品

b) items are reordered within any of the carts (sortable)

检查此提琴是否实现: http://jsfiddle.net/CzKn9/3/

Check this fiddle for the implementation: http://jsfiddle.net/CzKn9/3/

在您的小提琴中，我可以看到您在多个元素(带有id'cart'的两个元素)上使用了相同的id属性.您应该避免这种情况，因为id属性旨在唯一标识DOM树中的一个元素. (例如，如果您执行document.getElementById('x')并且多个元素的ID为'x'，则将仅获得与该ID匹配的第一个元素).我修改了您的代码以纠正此问题.

In your fiddle, i could see that you have used the same id property on multiple elements (2 elements with the id 'cart'). This is something you should look to avoid as the id attribute was designed to uniquely identify one element in the DOM tree. (for instance if you do a document.getElementById('x') and multiple elements have the id 'x', you'll get only the first element matching that ID). I modified your code to rectify this.

第二，我添加了一个函数，用于在每次拖放或排序事件时重新创建输入字段(在将表单提交到服务器时将提交的输入字段).创建的输入字段的ID的格式为list_1_item_1，list_1_item_2，list_2_item_1，list_1_item_2等.

Secondly, I added a function that recreates your input fields (that will be submitted when you submit your form to server) on every drag and drop or sort event. The ids of the input fields created are of the form list_1_item_1, list_1_item_2, list_2_item_1, list_1_item_2 and so on.

希望这会有所帮助.

更新

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

ID index increment added. Check this fiddle: http://jsfiddle.net/CzKn9/4/

这篇关于如何使用jQuery UI的droppable排序和创建多个文本字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！