vue中实现拖拽调整顺序功能

一、使用vuedraggable是标准的组件式封装 或 vue-dragging 指令方式实现拖拽调整顺序功能。

1：安装依赖

npm install vuedraggable或yarn add vuedraggable

2：使用全局注册或者哪个页面使用就引入哪个页面也可。

import vuedraggable from 'vuedraggable'

在使用时，可通过 v-model 来双向绑定本地 data，如果需要更新或者是触发父组件监听的事件，可以在 updated() 中去 emit。

引入后直接声明该组件然后使用即可，示例代码：

<template><vuedraggable class="wrapper" v-model="list"><transition-group><div v-for="item in list" :key="item" class="item">{{item}}</div></transition-group></vuedraggable>
</template><script>
import vuedraggable from 'vuedraggable';export default {name: 'Index',components: {vuedraggable},props: {},data() {return {list: [1,2,34,4,54,5]}},updated() {console.log(this.list)},methods: {}
}
</script><style scoped lang="scss">
.wrapper {display: flex;justify-content: center;width: 100%;.item{width: 300px;height: 50px;background-color: #42b983;color: #ffffff;}
}
</style>

二、vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。

与vuedraggable相比，awe-dnd没有双向绑定，因此提供了事件，在拖拽结束时用来更新列表或去触发父组件监听的事件。

1：安装依赖

npm install awe-dnd --save或yarn add awe-and

项目中main.js 文件

import VueDND from 'awe-dnd'
Vue.use(VueDND);

<template><div class="color-list"><divclass="color-item"v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }":key="color.text">{{color.text}}</div></div>
</template><script>
export default {data () {return {colors: [{text: "Aquamarine"}, {text: "Hotpink"}, {text: "Gold"}, {text: "Crimson"}, {text: "Blueviolet"}, {text: "Lightblue"}, {text: "Cornflowerblue"}, {text: "Skyblue"}, {text: "Burlywood"}]}},
}
</script>

可以发现绑定时 v-dragging="{ item: color, list: colors, group: 'color' }" 这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

而提供的两个事件方法如下：

export default {mounted () {this.$dragging.$on('dragged', ({ value }) => {console.log(value.item)console.log(value.list)console.log(value.otherData)})this.$dragging.$on('dragend', (res) => {console.error(res);})}
}

一般使用的方法就是：

this.$dragging.$on('dragend', (res) => {console.error(res);
})

vue中实现拖拽调整顺序功能相关推荐

vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...
如何在vue中实现拖拽功能
HTML5 drag & drop 拖拽与拖放想要实现该功能,先了解一下H5中的drag和drop这2个概念.
vue中实现拖拽功能
自定义的全局指令提示:拖拽指令文章目录自定义的全局指令一.拖拽 1.自定义拖拽指令 2.页面挂载 3.css样式提示:以下是本篇文章正文内容,下面案例可供参考一.拖拽 1.自定义拖拽指令 ...
vue 表格左右拖拽调整列宽_解决 | iview低版本实现表格拖拽，滚动条列宽计算问题...
文 / 景朝霞来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 点个赞,让我知道你来过~ 如果大佬觉得我的方案太low,请打脸轻一点~ 如果大佬有更好的方案,请不吝赐教~ 0 ...
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装 npm install vuedraggable 或者使用镜像安装 cnpm install vuedraggable 2.使用首先在使用的组件中引入 import draggable f ...
Vue中实现拖拽效果
Vue2项目中遇到需求要求页面左侧部分实现拖拽效果实现效果: 1665739151500 实现代码: 一.使用盒子包裹需要拖拽的区域,并绑定ref 二.使用$ref获取DOM信息具体代码(这个方法 ...
vue中使用拖拽drag
被拖拽的节点 dragable="true" @dragstart="drag" 拖入的节点 @drop="drop" @dragover= ...
vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮功能介绍: 大致需求: 整体思路: 简单效果展示: 具体实现: 一.position:fixed布局: 二.touch事件绑定: 三.页面引入: 功能介绍: 在移动端开发中, ...
css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
写在最前针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用ifra ...

vue中实现拖拽调整顺序功能

vue中实现拖拽调整顺序功能相关推荐

最新文章

热门文章