可拖拽排序的vue组件

Posted 2022-05-06 jeely

最近在优化一个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>

组件参数

名称	类型	默认值	说明
item	Object	-	每一个可拖拽的对象
list	Array	-	可拖拽对象的数组
group	String	-	这是一个dragging list的unique key

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

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

作者：real_ting
链接：https://www.jianshu.com/p/7afcf8a7af75
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。