Vue.Draggable -- 实现元素拖拽

中文文档

https://www.itxst.com/vue-draggable/tutorial.html

参考文章

文章1@Clew123 ( 较详细 )
文章2@coderdwy
文章3@程序员Better

安装

npm install vuedraggable

引入

import draggable from ‘vuedraggable’

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

<script>
// 引入拖拽组件
import draggable from 'vuedraggable'
export default {
  name: 'demo',
  components: {
    //调用组件
    draggable,
  },
  data () {
    return {
      list:[
        {
          id: 1,
          name: 'a'
        },
        {
          id: 2,
          name: 'b'
        },
        {
          id: 3,
          name: 'c'
        },
        {
          id: 4,
          name: 'd'
        },
        {
          id: 5,
          name: 'e'
        },
        {
          id: 6,
          name: 'f'
        },
      ]
    }
  },
}
</script>

vuedraggable 拖拽无法触发页面滚动

问题描述:

• 元素拖拽过程中,无法滚动页面

解决办法:

• 给 draggable 标签添加 :force-fallback=“true” 该元素
• 参考文章@木灵鱼儿

<Draggable v-model="form.chapters" :force-fallback="true">
  ...
</Draggable>