Vue拖拽排序 | 24K博客

前端 Vue 拖拽排序

发布日期: 2019-05-28

文章字数: 358

阅读时长: 2 分

阅读次数:

Awe-dnd

Awe-dnd：一个轻量的 Vue 拖动排序插件，可使您的元素在 Vue 中可拖动。

demo 示例图

Awe-dnd 特点

支持桌面和移动设备
Vue 数据驱动理念
支持 multi drag
支持 Vue 1.0 and Vue 2.0

要求

Vue: ^1.0.0 or ^2.0.0

安装

$ npm install awe-dnd --save

使用

// main.js
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>

API

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

参数

{item} Object
{list} Array
{group} String
{comb} String

group is unique key of dragable list.

comb use for multi drag

示例

<!-- Vue2.0 -->
<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>

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

事件

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

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

    })
  }
}