jquery可排序，排序后更改名称属性

Question

我有两个可排序的 ul 列表，在您将一个元素从一个列表拖放到另一个列表后，我希望更改该元素的名称属性，因此我一直有 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

您可以像这样更改元素的名称属性：

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