使用 jquery 实现拖放

Question

我有一个 MVC 3 应用程序，它要求系统管理员能够从属性主列表生成设备属性的有序列表并将其保存为指定配置。

我查看了以下问题和答案 - Implementing Drag n Drop using JQuery

我已经在视图中包含了 JQuery UI 可排序库、脚本和样式，并且在视觉上一切似乎都很好。 Ityems从master拖放到输出列表中。

我的问题是从输出列表中检索数据 - 可排序的 JQuery UI 元素。在引用的文章中，他们建议对可排序元素使用序列化方法。但是， sortable 似乎只返回表单上输入元素的查询字符串。在我的例子中，可排序元素是一个有序列表，它的数据没有被引用。

如何将可排序元素的数据返回到控制器？

谢谢。

Answer 1

jQuery UI 的serialize 方法查看元素的ID 并创建一个序列化的哈希字符串，该字符串适合回发到您的控制器。默认情况下，您的 ID 必须采用以下格式之一：

<li id="setname=number"></li>
<li id="setname-number"></li>
<li id="setname_number"></li>

所有这些都会导致：

"setname[]=number&setname[]=number"

如果 serialize 方法返回一个空字符串，那么您要么没有正确定位可排序元素，它们还没有被 sortable() 调用初始化，或者 ID 的格式不正确。请注意，可以通过将自定义的“key”、“attribute”和“expression”参数传递给 serialize 方法来修改 jQuery UI 序列化元素的方式：

var sortedList = $('ul.sortableList').sortable('serialize', { attribute: 'itemid', key: 'foo[]', expression: /(.+)=(.+)/ });

当然，您始终可以滚动自己的序列化方法并手动将更新后的 LI 位置传递给您的控制器：

var positions = new Array();

$sortableLis.each(function () {

    var sortableId = $(this).find('input[id$=SortableID]').val();
    var sortOrder = $sortableLis.index($(this));

    var SortablePosition = {
        ID: encodeURIComponent(sortableId),
        SortOrder: sortOrder
    };

    positions.push(SortablePosition);

});

$.ajax({
    type: 'POST',
    url: '/UpdateSortablePositions',
    data: "{ positions: '" + $.toJSON(positions) + "' }",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json'
});