手持端 轻量排序插件....
还有关于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>
