码迷,mamicode.com
首页 > 编程语言 > 详细

可拖拽排序的vue组件

时间:2019-07-23 14:56:22      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:name   this   gen   可拖拽   com   作者   需要   www   形式   

最近在优化一个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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

可拖拽排序的vue组件

标签:name   this   gen   可拖拽   com   作者   需要   www   形式   

原文地址:https://www.cnblogs.com/Jeely/p/11231477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!