首页 专题 文章 代码 归档

【拖拽】Vue中使用Awe-dnd进行元素的拖拽

1. 前言

这算是一个非常不错的库了,直接可以使用并进行拖拽!

npm地址:

https://www.npmjs.com/package/awe-dnd

2. 使用

2.1. 安装

npm install awe-dnd --save

2.2. 使用

注册

//main.js

import VueDND from 'awe-dnd'

Vue.use(VueDND)

全局注册

使用

在需要用的地方:

<template>
  <div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
  </div>
</template>

使用

v-dragging="{ item: color, list: colors, group: 'color' }"

即可;

item就是当前被拖拽的元素,list就是整个数据集合(数组),group不知道什么(官方:group is unique key of dragable list.),没管

这样设置后,就可以在Mounted里面使用:

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

    })
  }
}

然后排序后,就可以进行想要的操作了;

比如我这里进行的操作是:

获取到整个数据(数组),也就上面的value.list

这个数据是排序后的,所以我们遍历这个之后就可以得到整个数据的顺序,然后进行相应的操作;

3. Demo

官方Demo:https://hilongjw.github.io/vue-dragging/

截图-1593312313

此文阅读完毕,您可以:分享
二维码图片 扫描关注我们哟