Question

我有两个可排序的ul列表，在你将一个元素从一个列表拖放到另一个列表后，我想要更改该元素的name属性，所以我一直有两个组要发送到我的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");

jquery sortable，在排序更改名称属性之后

2 个答案: