一、描述

之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/

后面发现二维码多了之后有时候想要排序,需要将比较重要的放在上面或者第一个,因此拖拽排序的需求就出来了。

知道 vue 肯定是有组件存在的,因此就直接搜了搜,找了两个不同的库分别是:

两个库的里面不同,一个是直接进行组件封装,一个是进行指令封装。

二、vuedraggable

vuedraggable 是标准的组件式封装,并且将可拖动元素放进了 transition-group 上面,过渡动画都比较好。

使用方式:

yarn add vuedraggable

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">
        <p>{{item}}</p>
      </div>
    </transition-group>
  </vuedraggable>
</template>

<script>
import vuedraggable from 'vuedraggable';

export default {
  name: 'HelloWorld',
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
      list: [1,2,34,4,54,5]
    }
  },
  updated() {
    console.log(this.list)
  },
  methods: {
  }
}
</script>
<style scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item{
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
}
</style>

实现的效果:

22.gif

官方的示例:

官方的示例 gif:

https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif

更多的事件及使用方法请参阅:

三、Awe-dnd

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

相比及 vuedraggable 来说, awe-dnd 是没有双向绑定(这里没有双向绑定并不是很严谨,准确的来说没有暴露双向绑定的方式),因此提供了事件,在拖拽结束的时候用来更新列表(不需要手动更新列表,其实内部是实现了双向绑定的)或者是去触发父组件监听的事件。

安装依赖:

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

使用:

import VueDND from 'awe-dnd'

Vue.use(VueDND)
<!--your.vue-->
<script>
export default {
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  },
  /* if your need multi drag
  mounted: function() {
      this.colors.forEach((item) => {
          Vue.set(item, 'isComb', false)
      })
  } */
}
</script>

<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 则是用来声明一个组,来保证可以在一个页面中进行多个数据源的操作。

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

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);
})

效果:

223.gif