Ändern von Attributen von Elementen, die in einer sortierbaren Liste mit jQuery abgelegt werden

Question

Ich habe eine Liste von Elementen, die von einer Quellenliste zu einer Zielliste gezogen werden können, die in einem Formularelement enthalten ist. Dies funktioniert für eine Zielliste, da das Attribut 'name' statisch angegeben werden kann. Ich versuche jedoch, einen Weg zu finden, um mehrere Ziellisten zu unterstützen, und dachte mir, wenn ich die ID aus der Zielliste nehmen und sie dynamisch als Namensattribut zu einem Eingabefeld hinzufügen könnte, wenn es in das Sortierfeld fällt Liste, jede Liste könnte als separates Array eingereicht werden. Mein sortierbar, ziehbar und abwerfbaren Funktionen arbeiten genau so, wie ich sie mit dem folgenden Code wollen:

<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> 

und die folgende 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 
    }); 

Sie es in Aktion auf this fiddle sehen können. Um dies anhand dieses Beispiels zusammenzufassen, versuche ich, 'option []' entweder durch 'list1 []' oder 'list2 []' als Namensattribut des Eingabefeldes zu ersetzen, wenn eine Option in eine dieser Listen fällt .

Ich nehme an, dass ich etwas wie attr ('name', $ (this) .attr ('id')) in der Funktion "receive" oder in einer "drop" -Funktion verwenden müsste, aber ich bin nicht genau, wo es zu setzen ist und wie das Eingabefeld als Ziel der attr() - Änderung anstelle des enthaltenden <li> definiert wird.

---

AUFLÖSUNG: änderte ich die receive Funktion update und Twisty zweite Code-Snippet hinzugefügt, so dass es jetzt aussieht wie:

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

Answer 1

ich es in der data-list Attribut setzen würde von das Zielelement. Zum Beispiel:

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

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

Dann in receive, können Sie den Wert, den Sie das name Attribut wollen zuweisen:

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

Oder Sie die ID lesen konnten:

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

Dies führt in dem empfangenen Artikel mit entweder:

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

Da $(this) die sortierbare Liste ist, in die das Element gezogen wurde, erhält es die Listennummer aus den Daten.