實現 - 拖-n-drop-using-jquery

Question

我有一個MVC 3應用程序，要求Sysytem Admin能夠從主屬性列表中生成一個有序的設備屬性列表，並將其另存爲一個指定的配置。

我看問題和答案以下 - Implementing Drag n Drop using JQuery

我已經包含了JQuery的UI排序庫，腳本和樣式查看和視覺一切似乎工作的偉大。 Ityems從主人拖放到輸出列表。

我的問題是從輸出列表中檢索數據 - 可排序的JQuery UI元素。在參考文章中，他們建議在可排序元素上使用serialize方法。但是，可排序只能返回表單上輸入元素的查詢字符串。在我的情況下，排序元素是一個有序列表，它的數據沒有被引用。

如何將可排序元素的數據返回給控制器？

謝謝。

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" 

如果序列化方法返回一個空字符串，那麼你可能是沒有目標正確的可排序元素，它們尚未通過sortable（）調用初始化，或者ID的格式不正確。需要注意的是它可以修改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' 
});