保存並恢復兩個列表中的可排序位置

Question

我正在使用RubaXa的優秀Sortable JS庫，以便在基於Bootstrap的儀表板上拖放重新排列div。由於div全部位於2列（左側和右側），因此我使用「leftColumn」和「rightColumn」的id來定義列。

爲了讓列之間拖動，我設置了同一組中的兩個sortables，像這樣：

Sortable.create(leftColumn, { 
    group: 'dash_sections', 
}); 
Sortable.create(rightColumn, { 
    group: 'dash_sections', 
}); 

現在我試圖加載和保存來自兩個列表的順序（整個組） 。我在每個div標記中放置了data-id字段，並且我試圖使用以下代碼來保存和恢復所有內容的順序。

Sortable.create(rightColumn, { 
    group: 'dash_sections', 
    store: { 
     get: function (sortable) { 
      var order = localStorage.getItem(sortable.options.group); 
      return order ? order.split('|') : []; 
     }, 

     set: function (sortable) { 
      var order = sortable.toArray(); 
      localStorage.setItem(sortable.options.group, order.join('|')); 
     } 
    } 
}); 

但是，我只保存和恢復該列的順序，而不是整個組。我最終希望將該組的訂單存儲在數據庫中的單個字符串中。我如何着手挽救和恢復整個團隊的秩序？

更新： 我把類似的代碼，在這兩個sortable.create功能，採用 「leftcol」 和而不是sortable.options.group 「rightcol」。只要不在列之間拖動，就可以正確保存每個可排序的順序。即使在列之間拖動，我仍然在尋找保存順序的方法。

Answer 1

這裏是我是如何實現類似的功能

推出了category標誌可排序選項：

var leftColumnOptions = { 
    group: "dash_sections", 
    category: "left_column", 
    store: setupStore() 
}; 

var rightColumnOptions = { 
    group: "dash_sections", 
    category: "right_column", 
    store: setupStore() 
} 

setupStore爲localStorage可用性功能檢查和適用get和set

function setupStore() { 
    if (localStorageAvailable) { // basic localStorage check: (typeof (localStorage) !== "undefined") 
     return { 
      get: getValue, 
      set: setValue 
     }; 
    } 
    return {}; 
} 

getValue和基於上述

function getValue(sortable) { 
    var order = localStorage.getItem(sortable.options.category); 
    return order ? order.split('|') : [];  
} 

function setValue(sortable) { 
    var order = sortable.toArray(); 
    localStorage.setItem(sortable.options.category, order.join('|')); 
} 

這是初始化可排序的前檢查的的localStorage存儲順序信息的一個好主意，在選項中定義的類別名稱點retreive和儲存物品的ID，我使用lodash爲了方便

function applyState($section, categoryName) { 
    if (localStorageAvailable) { 
     var order = localStorage.getItem(categoryName); 
     var itemIds = order ? order.split('|') : []; 
     var $items = _.map(itemIds, function(itemId, index) { 
      return $("[data-id='" + itemId + "'"); 
     }); 
     $section.append($items); 
    } 
} 

用法是：

applyState($(".js-left-column"), "left_column"); 
applyState($(".js-right-column"), "right_column"); 
// initialize sortable 

整個代碼：

HTML：

<div class="js-two-column-sortable js-left-column" data-category="left_column"> 
    <!-- elements --> 
</div> 
<div class="js-two-column-sortable js-right-column" data-category="right_column"> 
    <!-- elements --> 
</div> 

JS：

var localStorageAvailable = (typeof localStorage !== "undefined"); 

function getValue(sortable) { 
    var order = localStorage.getItem(sortable.options.category); 
    return order ? order.split('|') : [];  
} 

function setValue(sortable) { 
    var order = sortable.toArray(); 
    localStorage.setItem(sortable.options.category, order.join('|')); 
} 

function setupStore() { 
    if (localStorageAvailable) { 
     return { 
      get: getValue, 
      set: setValue 
     }; 
    } 
    return {}; 
} 

function onAdd(evt) { 
    setValue(this); 
} 

function applyState($section, categoryName) { 
    if (localStorageAvailable) { 
     var order = localStorage.getItem(categoryName); 
     var itemIds = order ? order.split('|') : []; 
     var $items = _.map(itemIds, function(itemId, index) { 
      return $("[data-id='" + itemId + "'"); 
     }); 
     $section.append($items); 
    } 
} 

var options = { 
    group: "two-column-sortable", 
    store: setupStore(), 
    onAdd: onAdd 
}; 

function init() { 

    $(".js-two-column-sortable").each(function(index, section) { 
     var $section = $(section); 
     var category = $section.attr("data-category"); 
     var sortableOptions = _.extend({}, options, { category: category }); 
     applyState($section, category); 
     $section.data("twoColumnSortable", new Sortable(section, sortableOptions)); 
    }); 
} 

init();