Vue拖拽排序

picture

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)

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

示例

    
{{color.text}}




    
{{color.text}}

事件

    
{{color.text}}

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

    })
  }
}

许可证

MIT 许可证

关键词

vue-dragging
vue-drag
vue-dnd
vue
draggable
drag
drop
html5
draggable
droppable
drag-and-drop
dnd