手持端 輕量排序外掛....
還有關於react、angular的配置,搜尋官網就可以找到相對應的文件.
具體api可以參考: segmentfault.com/a/119000000…
1. 首先引入 vue 和 sorttabejs<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/sortablejs/Sortable.min.js"></script>複製程式碼2. 寫好需要使用到的樣式,和頁面佈局(根據文件內拖拽時過濾等樣式,寫自己需要的樣式,這裡我只寫了拖拽時的樣式)
================CSS=================
* {list-style: none}
#app {display: flex;width: 1000px;justify-content: space-around;}
#app div {width: 350px;border: 1px solid #ccc}
.draggable-list{height: 100%;padding: 0px 10px}
.draggable-list li{padding: 9px;border: 1px solid #e7ebee;border-radius: 3px;margin-bottom: 5px;cursor: pointer;position: relative;transition: all .2s;}
.draggable-list li:hover{color: #87b4ee;border-color: #87b4ee;transition: all .2s;}
.placeholder-style{display: block;color: transparent;border-style: dashed;background-color: red}
.placeholder-styles{display: block;color: transparent;border-style: dashed;background-color: cyan}
複製程式碼<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { list-style: none } #app { display: flex; width: 1000px; justify-content: space-around; } #app div { width: 350px; border: 1px solid #ccc } .draggable-list{ height: 100%; padding: 0px 10px } .draggable-list li{ padding: 9px; border: 1px solid #e7ebee; border-radius: 3px; margin-bottom: 5px; cursor: pointer; position: relative; transition: all .2s; } .draggable-list li:hover{ color: #87b4ee; border-color: #87b4ee; transition: all .2s; } .placeholder-style{ display: block; color: transparent; border-style: dashed; background-color: red } .placeholder-styles{ display: block; color: transparent; border-style: dashed; background-color: cyan }
</style></head>
<body>
<div id="app"> <a href="https://segmentfault.com/a/1190000008209715" target="_blank">sortablejs文件連結</a> <div style="height: 500px;"> <ul id="doList" class="draggable-list"></ul> </div> <div style="height: 500px;"> <ul id="todoList" class="draggable-list"> <li v-for="(item, index) in shoppingList" :key="index" class="notwrap todolist-item" :data-index="index"> {{ item.name }} </li> </ul> </div> </div></body>
</html>複製程式碼3. 使用vue 初始化資料,Sortable.create()建立拖拽的物件,然後配置完成,就可以開始拖拽排序了.下面是一個簡單例子....
<script> var vm = new Vue({ el: "#app", data: { shoppingList: [ {name: '香腸'}, {name: '滷煮'}, {name: '醬汁臘肉'}, {name: '松花小肚'}, {name: '白丸子'}, {name: '紅丸子'}, {name: '汆丸子'}, {name: '蒸熊掌'}, {name: '蒸羊羔'}, {name: '香腸'}, {name: '滷煮'}, {name: '醬汁臘肉'}, {name: '松花小肚'}, {name: '白丸子'}, {name: '紅丸子'}, {name: '汆丸子'}, {name: '蒸熊掌'}, {name: '蒸羊羔'} ], affordList: [] }, mounted () { document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); }; let vm = this; let todoList = document.getElementById('todoList'); let sorts = Sortable.create(todoList, { group: { name: 'list', pull: true }, animation: 120, chosenClass: 'placeholder-styles', // 選中時會給該元素新增的CSS ghostClass: 'placeholder-style', onAdd: function (evt){ //拖拽時候新增有新的節點的時候發生該事件 console.log('onAdd.foo:', [evt.item, evt.from]); }, onUpdate: function (evt){ //拖拽更新節點位置發生該事件 console.log('onUpdate.foo:', [evt.item, evt.from]); }, onRemove: function (evt){ //刪除拖拽節點的時候促發該事件 console.log('noRmove.foo',event) }, onStart:function(evt){ //開始拖拽出發該函式 console.log('onStart.foo:', [evt.item, evt.from]); }, onSort:function(evt){ //發生排序發生該事件 console.log('onSort.foo:', [evt.item, evt.from]); }, onEnd: function(evt){ //拖拽完畢之後發生該事件 console.log('onEnd.foo:', [evt.item, evt.from]); console.log(evt); } });
let doList = document.getElementById('doList'); Sortable.create(doList, { group: { name: 'list', pull: true }, sort: true, animation: 120, fallbackClass: 'iview-admin-cloned-item', onAdd: function (evt){ //拖拽時候新增有新的節點的時候發生該事件 console.warn('onAdd.bar:', [evt.item, evt.from]); }, onUpdate: function (evt){ //拖拽更新節點位置發生該事件 console.warn('onUpdate.bar:', [evt.item, evt.from]); }, onRemove: function (evt){ //刪除拖拽節點的時候促發該事件 vm.doArray.splice(event.oldIndex, 1); console.warn('noRmove.bar---------------',event) }, onStart:function(evt){ //開始拖拽出發該函式 console.warn('onStart.bar:', [evt.item, evt.from]); }, onSort:function(evt){ //發生排序發生該事件 console.warn('onSort.bar:', [evt.item, evt.from]); }, onEnd: function(evt){ //拖拽完畢之後發生該事件 console.warn('onEnd.bar:', [evt.item, evt.from]); } }); } }) </script>複製程式碼