vue列表拖拽组件 vue-dragging

vue列表拖拽组件 vue-dragging

安装

$ npm install awe-dnd --save

应用　

在main.js中，通过Vue.use导入插件

import VueDND from 'awe-dnd'

Vue.use(VueDND)

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"

        }]

    }

  }

}

</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>　

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 }"

        :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', () => {

    })

  }

}