Sortable Materialize.css芯片

Question

是否有人使用Materialize.css芯片成功實現了jQuery的sortable？我試圖重新排列它們，但內部數據在排序後不會響應訂單。

https://jqueryui.com/sortable/

http://materializecss.com/chips.html

```

$(".location-chips").sortable({ 
    stop: function(e, ui){ 
     // This is still in the original order 
     console.log($(this).material_chip('data').map(function(o){return o.tag}).join(";")) 
    } 
    }) 

```

Answer 1

這是我想出了一個解決方案：

var source, dest; 
    $(".location-chips").sortable({ 
    connectWith: ".location-chips", 
    start: function(e, ui){ 
     source = dest = e.target; 
     console.log(source.outerText.split("close").filter(function(o){return o}).join(";")) 
    }, 
    change: function(e, ui){ 
     if(ui.sender){ 
     dest = e.target 
     } 
    }, 
    stop: function(e, ui){ 

     var dText = dest.outerText.split("close").filter(function(o){return o}).join(";") 
     $(dest).siblings("input").val(dText).trigger("change") 
     console.log(dText) 

     if(source != dest){ 
     var sText = source.outerText.split("close").filter(function(o){return o}).join(";") 
     $(source).siblings("input").val(sText).trigger("change") 
     console.log(sText) 
     } 

    } 

請注意，我將數據存儲在以分號爲分號的字符串中。

我不確定這是多麼穩定，因爲我使用的是芯片功能的無證內部工作。不幸的是，MaterialiseCSS團隊擊落了將芯片作爲內置功能排序的請求。