使用jQuery将项目属性下载到可排序列表中时修改项目的属性

Question

我有一个可从源列表拖动到包含在表单元素中的目标列表的项目列表。这对于一个目的地列表工作正常，因为可以静态指定'name'属性。但是，我试图找出一种方法来支持多个目标列表，并且我认为如果我可以从目标列表中获取ID并将其作为名称属性动态添加到输入字段，因为它被放入可排序列表中列表中，每个列表可以作为单独的数组提交。我的排序，可拖动和投掷的功能我希望的方式工作正好与下面的代码：

<div> 
     Available Items 
     <ul id="avail"> 
     <li><input type="hidden" name="options[]" value="1">Option 1</li> 
     <li><input type="hidden" name="options[]" value="2">Option 2</li> 
     <li><input type="hidden" name="options[]" value="3">Option 3</li> 
     <li><input type="hidden" name="options[]" value="4">Option 4</li> 
     </ul> 
    </div> 
    <p class="clear"></p> 
    <form action="myForm.php" method="post" enctype="multipart/form-data"> 
     <div style="float:left;"> 
     List #1 
     <ul class="sortable" id="list1"> 
     </ul> 
     </div> 
     <div style="float:left;margin-left:5px;"> 
     List #2 
     <ul class="sortable" id="list2"> 
     </ul> 
     </div> 
     <div class="clear"></div><br> 
    </form> 

及以下的jQuery：

$('#avail li').draggable({ 
     connectToSortable: ".sortable", 
     helper: "clone", 
     opacity: 0.75, 
    }); 
    var sortableIn; 
    $('.sortable').sortable({ 
     receive: function(event, ui) { 
     sortableIn = 1; 
     }, 
     over: function(event, ui) { 
     sortableIn = 1; 
     }, 
     out: function(event, ui) { 
     sortableIn = 0; 
     }, 
     beforeStop: function(event, ui) { 
     if (sortableIn == 0) { 
      ui.item.remove(); 
     } 
     } 
    }).droppable({ 
     greedy: true 
    }); 

你可以看到它在行动上this fiddle。因此，基于这个例子总结，当一个选项被放入这些列表之一时，我试图用'list1 []'或'list2 []'替换'option []'作为输入字段的名称属性。

我假设我需要在“receive”函数或“drop”函数中使用类似于attr（'name'，$（this）.attr（'id'））的东西，但我不是确切地确定将它放在哪里以及如何将输入字段定义为attr（）的目标而不是包含<li>。

---

解决方案： 我改变了receive功能update并添加曲折的第二代码片段它，因此它现在看起来像：

update: function(event, ui) { 
    sortableIn = 1; 
    ui.item.find("input").attr("name", $(this).attr("id") + '[]'); 
} 

Answer 1

我会把它的data-list属性目标元素。例如：

<ul class="sortable" id="list1" data-list="1"> 
</ul> 

<ul class="sortable" id="list2" data-list="2"> 
</ul> 

然后在receive，你可以指定你想要的name属性的值：

ui.item.find("input").attr("name", "list" + $(this).data("list") + "[]"); 

或者你可以读取ID：

ui.item.find("input").attr("name", $(this).attr("id") + "[]"); 

这将导致在收到的物品中有：

name="list1[]" 
name="list2[]" 

由于$(this)将作为元素被拖拽到的可排序列表，因此它将从数据中获取列表号。