如何使用 JQuery Sortable 从数据库中获取数据

Question

我正在尝试创建一个菜单，允许用户单击并将列表项拖动到新的顺序中。列表数据是从数据库中提取的。 我已经设法为我的菜单编写了单击和拖动功能，但是，在用户单击并拖动后，我很难以新的顺序保存数据。

这是我的可排序代码，除了带有 var objmodel 的行之外，它都可以工作。创建此变量时，它设法从数据库中获取一个空对象，并使用新的 shuffle 函数值填充该空对象。我需要它做的是抓取用户点击的对象，然后用新订单填充该对象。

数据示例：

1. 饼干 2.饼干 3.巧克力。

用户重新订购后：

1.巧克力 2.饼干 3.cookies

  $(document).ready(function () {
    $('#MenuItem tbody').sortable({
        axis: 'y',
        update: function (event, ui) {
            var order = 1;
            var model = [];

            $("#MenuItem tbody tr").each(function () {
                var objModel = { id: $(this).find("#MenuItem").data("model"), ShuffleFunction: order };

                model.push(objModel);
                order++;
            });


        }
    });

});

  <table id = "MenuItem"  class="promo full-width alternate-rows" style="text-align: center;">  <!-- Cedric Kehi DEMO CHANGE -->




        <tr>
            <th>Product Code
            </th>
            <th>Product Template
            </th>
            @*<th>
                @Html.DisplayNameFor(model => model.IndexList[0].Priority)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IndexList[0].WindowProduct)
            </th>*@
            <th>Description <!-- JACK EDIT -->
            </th>
            <th>Actions</th>
        </tr>
        <tbody >

        @foreach (var item in Model.IndexList)
        {


            <tr id ="trendingDisplay">

                <td class="center-text">

                    @Html.DisplayFor(modelItem => item.ProductCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ProductTemplate.Description)
                </td>
                @*<td class="center-text">
                    @Html.DisplayFor(modelItem => item.Priority)
                </td>
                <td class="center-text">
                    @Html.Raw(item.WindowProduct ? "Yes" : "No")
                </td>*@
                <td>
                    @Html.DisplayFor(modelItem => item.Description)

                </td>

@Html.ActionLink(" ", "Edit", new { id = item.ProductID }, new { title = "Edit", @class= "anchor-icon-no-text edit" }) @Html.ActionLink(" ", "Details", new { id = item.ProductID }, new { title = "Details", @class= "anchor-icon-no-text details" }) @Html.ActionLink(" ", "Delete", new { id = item.ProductID }, new { title = "Delete", @class= "anchor-icon-no-text delete" })

                </td>
            </tr>

        }


            </tbody>

    </table>

Answer 1

请审核：http://api.jqueryui.com/sortable/#event-update

更新（事件，用户界面）

当用户停止排序并且DOM位置发生变化时触发该事件。

用户界面

• 项目

类型：jQuery

代表当前拖动元素的 jQuery 对象。

如果您希望使用用户抓取并移动的项目，您可以使用ui.item。从你的例子。这可能看起来像：

var objModel = { id: ui.item.data("model"), ShuffleFunction: order };

由于您没有提供任何 HTML 或项目的工作示例，我无法确认这是否可行。