2016-04-28 71 views
5

我知道這將是顯而易見的,但我無法弄清楚。Rubaxa Sortable如何獲得項目數組

即時通訊使用Rubaxa /可排序,並希望更新我的數據庫與ajax時,項目被添加,刪除或列表排序。

var editableList = Sortable.create(document.getElementById('editable'), { 
    animation: 150, 
    filter: '.js-remove', 
    onFilter: function (evt) { 
     evt.item.parentNode.removeChild(evt.item); 
    }, 
    onSort: function(evt) { 
     console.log(editableList.toArray()); // not working 

    } 
}); 

document.getElementById('addUser').onclick = function() { 
    Ply.dialog('prompt', { 
     title: 'Add', 
     form: { name: 'name' } 
    }).done(function (ui) { 
     var el = document.createElement('li'); 
     el.innerHTML = ui.data.name + '<i class="js-remove">✖</i>'; 
     editableList.el.appendChild(el); 
    }); 
}; 

任何幫助表示讚賞。

回答

9

我解決這樣說:

HTML:

<ul id="products"> 
    <li data-key="1"></li> 
    <li data-key="2"></li> 
    <li data-key="3"></li> 
</ul> 

JS:

[2, 3, 1] 

var element = $('#products')[0]; 
var sortable = new Sortable(element, { 
    handle: '.drag-handle', 
    ghostClass: 'drag-ghost', 
    onSort: function (e) { 
     var items = e.to.children; 
     var result = []; 
     for (var i = 0; i < items.length; i++) { 
      result.push($(items[i]).data('key')); 
     } 
     console.log(result); 
     /* Do ajax call here */ 
    } 
}); 

排序,你會得到的物品鍵陣列後