vue中实现拖拽排序功能的详细教程_vue.js_

原生拖拽 API 实现拖拽

设置元素 dragable

将元素的 dragable 属性设置 为 true （文本 图片 链接 的draggable 属性默认为 true）则元素可拖放

拖拽

拖放事件

在拖放的过程中涉及到两种元素，一种是被拖拽元素（源对象），一种是放置区元素（目标对象），不同的对象有不同的拖放事件。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们要在这两个拖放事件中使用preventDefault来阻止浏览器的默认行为；而且目标对象想要变成可释放区域，必须设置dragover 和 drop 事件处理程序属性。

拖拽排序

利用拖放API来实现列表的拖拽排序

1. 由于拖动是实时的，所以没有使用drop而是使用了dragenter触发排序。
2. 在源对象开始被拖拽时记录其索引dragIndex，当它进入目标对象时（对应dragenter事件），将其插入到目标对象的位置。
3. 其中dragenter方法中有一个判断this.dragIndex !== index(index为当前目标对象的索引)，这是因为源对象同时也是目标对象，当没有这个判断时，源对象开始被拖拽时就会立刻触发自身的dragenter事件，这是不合理的。

拖拽API + 防抖实现

vue awe-dnd 拖拽组件

安装 awe-dnd 组件库

yarn add awe-dnd -S

在 main.js 中将 awe 挂载到全局

// 引入拖拽排序插件 import VueDND from 'awe-dnd' Vue.use(VueDND) 

实现案例

v-dragging=“{ item: item, list: colors, group: ‘item’,otherData:‘whatever u want’, comb: ‘isComb’}”

list: 列表的遍历数据,

item: 是当前循环值 , 遍历后需要拖拽功能的元素

group: “unique key of dragable list”即拖拽列表的独特key值

// 拖拽事件 this.$dragging.$on("dragged", (result) => { debugger // console.log('result===>',result) // result 拖拽后的信息 将排序后console.log的结果重新赋值 this.list = result.value.list; }); 

项目中-- 拖拽的效果 不理想

功能能够实现，但拖拽的效果不是很好，无法修改拖拽图层的透明度

vue-smooth-DnD

Vue Smooth DnD 是一个快速、轻量级的拖放、可排序的 Vue.js 库，封装了 smooth-dnd 库。

vue-smooth-DnD 文档 ： https://github.com/kutlugsahin/vue-smooth-dnd

安装 smooth-dnd

yarn add vue-smooth-dnd -S

API: container

Container 属性的使用

提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                

                

                

                                            
上一篇：JavaScript实现简单表单验证案例_javascript技巧_
                                                                
下一篇：js实现注册页面校验功能_javascript技巧_