轻量级 Vue 拖动排序组件Awe-dnd

awe-dnd 基于 vue2.x 拖放排序组件。让你轻松实现网页元素/图片随意拖动排序效果。

功能效果有些类似比较强大的一款vue拖拽组件vuedraggable。

https://github.com/SortableJS/Vue.Draggable

安装

$ npm i awe-dnd -S

引入组件

// 在main.js中引入import VueDND from 'awe-dnd';Vue.use(VueDND);

快速使用

<template>  <div class='color-wrap'>    <div      class='item'      v-for='color in colorList' v-dragging='{ item: color, list: colorList, group: 'color' }'      :key='color.text'    >{{color.text}}</div>  </div></template><script>  export default {    data () {      return {        colorList: [{          text: 'Aquamarine'        }, {          text: 'Hotpink'        }, {          text: 'red'        }, {          text: 'green'        }, {          text: 'Blueviolet'        }, {          text: 'Lightblue'        }, {          text: 'Cornflowerblue'        }, {          text: 'blue'        }, {          text: 'yellow'        }]      }    },    mounted () {      this.$dragging.$on('dragged', ({ value }) => {        console.log(value.item)        console.log(value.list)        console.log(value.otherData)      })      this.$dragging.$on('dragend', () => {        // ...      })    }  }</script>

组件参数

大家可以在此基础上发挥自己的创造力开发一些比较有意思的拖拽功能。

最后附上项目地址链接。

# 示例地址 http://hilongjw.github.io/vue-dragging/# 仓库地址https://github.com/hilongjw/vue-dragging

ok，今天就分享到这里。大家如果在项目中需要用到的话，可以去看下哈！