jquery可排序，排序後更改名稱屬性

Question

我有兩個可排序的ul列表，將一個元素從一個列表拖放到另一個列表後，我希望該元素的name屬性被更改，所以我一直有2個組發送到我的ASP後端。

唯一的問題是，我不知道如何更改該屬性。

<script type="text/javascript"> 
    $('form').submit(function() { 
     console.info($(this).serialize()); 
     return false; 
    }); 

    $(document).ready(function() { 
     $("#groep1").sortable({ 
      connectWith: ["#groep2"] 

     }); 
     $("#groep2").sortable({ 
      connectWith: ["#groep1"] 
     }); 
    }); 
</script> 

<h2>Wijzig klasgroep</h2> 
<% using (Html.BeginForm()) {%> 
    <%: Html.ValidationSummary(true) %> 

<div class="groep1"> 
<h3><%: Model.titleGroep1 %></h3> 
    <ul id="groep1" name="blabla" class="dragndrop"> 
    <% foreach (var item in Model.groep1) { %> 
     <li id="<%: item.id %>"><%: item.naam %> <%: item.voornaam %><%: Html.Hidden("groep1", item.id) %></li> 

    <% } %> 
    </ul> 
</div> 

<div class="groep2"> 
<h3><%: Model.titleGroep2 %></h3> 
    <ul id="groep2" class="dragndrop"> 
    <% foreach (var item in Model.groep2) { %> 
     <li id="<%: item.id %>"><%: item.naam %> <%: item.voornaam %><%: Html.Hidden("groep2", item.id) %></li> 
    <% } %> 
    </ul> 
</div> 

編輯

所以現在我有這個在jQuery：

<script type="text/javascript"> 
    $(document).ready(function() { 
     jQuery.ajaxSettings.traditional = true; 
     $("#groep1").sortable({ 
      connectWith: ["#groep2"], 
      accept: 'sortitem', 
      receive: function (sorted) { 
       var serial = $('#groep1').sortable('serialize'); 
       serial = serial.replace(/\[\]/gi, ""); 
       alert(serial); 
       $.ajax({ 
        url: "WijzigKlasgroep/WijzigKlasgroep?vakId=1&klasgroepId1=1&klasgroepId2=2", 
        type: "POST", 
        data: serial, 
        //wordt een partial view hieronder 
        success: function (feedback) { $('#feedback').html("Klasgroepen geupdated!"); }, 
        error: function (feedback) { $('#feedback').html("some weird error"); } 
       }); 
      } 
     }); 
     $("#groep2").sortable({ 
      connectWith: ["#groep1"] 
     }); 
    }); 
</script> 

<h2>Wijzig klasgroep</h2> 
<div id="feedback"></div> 
<div class="groep1"> 
<h3><%: Model.titleGroep1 %></h3> 
    <ul id="groep1" class="dragndrop"> 
    <% foreach (var item in Model.groep1) { %> 
     <li class="sortitem" id="groep_<%: item.id %>"><%: item.naam %> <%: item.voornaam %></li> 

    <% } %> 
    </ul> 
</div> 

<div class="groep2"> 
<h3><%: Model.titleGroep2 %></h3> 
    <ul id="groep2" class="dragndrop"> 
    <% foreach (var item in Model.groep2) { %> 
     <li class="sortitem" id="groep_<%: item.id %>"><%: item.naam %> <%: item.voornaam %></li> 
    <% } %> 
    </ul> 
</div> 

<br style="clear: both;" /> 

但是，控制器功能得到討厭這樣說：

 [HttpPost, Authorize] 
    public ActionResult WijzigKlasgroep(Docent docent, int vakId, int klasgroepId1, int? klasgroepId2) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      String test2 = Request.Form["groep"]; // this holds all the data, but, the data is just a plain string which means i have to cut it myself.. not really neat code :) 
     } 

     return View(); 
    } 

由於已經傢伙！ :)

Answer 1

您可以利用排序「接收」方法。此方法採用'ui'參數，您可以訪問'ui.item'來獲取排序的元素。

像

$("#groep1").sortable({ 
    receive: function (event, ui) { 
     var element = ui.item; 
     //change name on element here 
    } 
}); 

Answer 2

可以更改元素的name屬性是這樣的：

 $MyDiv = $("#MyDiv"); 
     $MyDiv.attr("name", "Sue");