Question

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

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

数据示例：

饼干 2.biscuit 3.chocolate。

用户重新订购后：

1.chocolate 2.biscuit 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（＆＃34;＆＃34;，＆＃34;编辑＆＃34;，新{id = item.ProductID}，新{title =＆＃34;编辑＆＃34;，@ class =＆＃ 34;锚图标 - 无文字编辑＆＃34;}） @ Html.ActionLink（＆＃34;＆＃34;，＆＃34;详情＆＃34;，新{id = item.ProductID}，新{title =＆＃34;详情＆＃34;，@ class =＆＃ 34;锚图标 - 无文字细节＆＃34;}） @ Html.ActionLink（＆＃34;＆＃34;，＆＃34;删除＆＃34;，新{id = item.ProductID}，新{title =＆＃34;删除＆＃34;，@ class =＆＃ 34; anchor-icon-no-text delete＆＃34;}）

                </td>
            </tr>

        }


            </tbody>

    </table>

Answer 1

请查看：http://api.jqueryui.com/sortable/#event-update

更新（event，ui）

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

<强> UI


项目


输入：jQuery

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

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

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

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

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

1 个答案: