Vue拖拽Draggable插件

版权声明： https://blog.csdn.net/xiasohuai/article/details/83856921

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

具体说明，请参考：https://www.npmjs.com/package/vuedraggable

npm官方演示：

vuedraggable特性：

1. 支持触摸设备
2. 支持拖拽和选择文本
3. 支持智能滚动
4. 支持不同列表之间的拖拽
5. 不以jQuery为基础
6. 和视图模型同步刷新
7. 和vue2的国度动画兼容
8. 支持撤销操作
9. 当需要完全控制时，可以抛出所有变化
10. 可以和现有的UI组件兼容

使用

安装：

npm install vuedraggable

页面引入：

import draggable from 'vuedraggable'

data定义数据进行模拟：

<template>
  <div>
    <!-- 调用组件  -->
    <draggable element="ul" v-model="listdata">
      <li v-for="item in listdata">{{item.name}}</li>
    </draggable>
    <!-- 展示list数据效果 -->
    {{listdata}}
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'draggabletest',
  components: { 
    draggable,
  },
  data () {
    return {
      listdata:[
        {
          id: 1,
          name: '叶落森1'
        },
        {
          id: 2,
          name: '叶落森2'
        },
        {
          id: 3,
          name: '叶落森3'
        },
        {
          id: 4,
          name: '叶落森4'
        },
        {
          id: 5,
          name: '叶落森5'
        }
      ]
    }
  },
}
</script>