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

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

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

例如：

• 橙子
• 苹果
• 香蕉

在我的表单的字段中生成以下值（当然基于data-product attribute ）：

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

如果我向上移动苹果，那么这些字段也必须更新。

这是我放在一起的一些HTML：

 
 
 
Products
 
 
T-Shirts
 
 
 
Lolcat Shirt
 
Cheezeburger Shirt
 
Buckit Shirt
 
 
 
Bags
 
 
 
Zebra Striped
 
Black Leather
 
Alligator Leather
 
 
 
Gadgets
 
 
 
iPhone
 
iPod
 
iPad
 
 
 
 
 
 
Shopping Cart
 
 
 
Add your items here
 
 
 
 
 
Shopping Cart
 
 
 
Add your items here
 
 
 
 
 
List 1
   
 
 
List 2
   
 
 

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')); $( "
" ).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）物品被从物品手风琴拖放到任何推车上

b）物品在任何推车内重新订购（可排序）

检查这个小提琴的实现： http ： //jsfiddle.net/CzKn9/3/

在你的小提琴中，我可以看到你在多个元素上使用了相同的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等。

希望这可以帮助。

UPDATE

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

Answer 2

试试这个小提琴：

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

使用sortable的stop事件来检索最顶层的li的值并将其添加到输入中。