最近在优化一个vue的博客系统，想实现文章列表处的文章拖拽功能。就试了一下awe-dnd vue插件，觉得还挺好用的。

安装

npm install awe-dnd --save

使用

在main.js中，通过Vue.use引入

import VueDND from 'awe-dnd'

Vue.use(VueDND)

在vue文件中的使用

<template>

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

</template>

<script>

  export default {

    data () {

      return {

        colors: [{

          text: "Aquamarine"

        }, {

          text: "Hotpink"

        }, {

          text: "Gold"

        }, {

          text: "Crimson"

        }, {

          text: "Blueviolet"

        }, {

          text: "Lightblue"

        }, {

          text: "Cornflowerblue"

        }, {

          text: "Skyblue"

        }, {

          text: "Burlywood"

        }]

      }

    },

    mounted () {

      this.$dragging.$on('dragged', ({ value }) => {

        console.log(value.item)

        console.log(value.list)

        console.log(value.otherData)

      })

      this.$dragging.$on('dragend', () => {

      })

    }

  }

</script>

组件参数

拖拽完成之后，需要把新的数组顺序提交到后台，创建一个sort_order字段保存顺序。

参考： 可拖动排序的vue组件 , github