vue可拖拽模块,sortablejs使用教程
vue可拖拽dom,sortablejs
·
第一步,安装
npm i sortablejs -S
第二步,html部分
<div id="my-navigation" class="navigation">
<div class="item" v-for="item in 6" :key="item " :data-id="item">
{{item }}
</div>
</div>
第三步,引入
import Sortable from 'sortablejs';
第四步,初始化
mounted() {
var el = document.getElementById('my-navigation');
//设置配置
var ops = {
animation: 200,
group: '',
draggable: '.item', // 要拖动的目标
disabled: false, //是否禁用拖拽和排序
dataIdAttr: 'data-id', //指定获取拖动后排序的属性
//拖动结束
onEnd: function (evt) {
//获取拖动后的排序
var arr = sortable.toArray();
// arr数组里的值是 data-id 的顺序
console.log({ evt, arr });
},
};
//初始化
var sortable = Sortable.create(el, ops);
},
更多推荐
已为社区贡献1条内容
所有评论(0)