使用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)將作爲元素被拖拽到的可排序列表，因此它將從數據中獲取列表號。