高品质 Vue 动态自由拖拽组件VueDraggable

这次给大家分享一款受开发者青睐的Vue拖拽组件Vue.Draggable。

vuedraggable 基于 Sortable.js 的Vue拖放组件，star高达12.6K+。支持拖放和视图模型数组同步，并提供 Sortable.js 的所有功能。

该作者开发的 Sortable.js，star 20.7K+。不依赖jQ，用于浏览器及移动设备自由拖拽排序，支持在 Vue、React及Angular 下使用。

https://github.com/SortableJS/Sortable

功能特性

• 完全支持 Sortable.js 功能：
• 支持触摸设备
• 支持拖动手柄和可选文本
• 智能自动滚动支持
• 不同列表之间的拖放
• 没有 jQuery 依赖
• 保持同步HTML和视图模型列表
• 与 Vue.js 2.0 transition-group 兼容
• 支持取消
• 在需要完全控制时报告任何更改的事件
• 重用现有的 UI 库组件（例如 vuetify、element 或 vue 材料等）

安装

$ npm i vuedraggable -S

支持浏览器cdn引入使用

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

使用插件

<template>
  <draggable v-model="myArray" @start="drag=true" @end="drag=false">
    <transition-group>
      <div v-for="element in myArray" :key="element.id">
        {{element.name}}
      </div>
    </transition-group>
  </draggable>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data(){
    return {
      myArray: []
    }
  },
}
</script>

ghost-class 和 handle

ghost指的是在拖拽体原本位置占坑的那个元素。

ghost-class 就是给占坑的元素设置样式。

<draggable ghost-class="ghost" >...</draggable>
<style scoped>
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
</style>

handle 就是拖拽的抓手，表示拖拽元素指定的可拖拽部分。

正常情况下拖拽元素整体是可拖拽，加了handle后，只有指定的地方可以拖拽，其它地方则不能进行拖拽。

<draggable tag="ul" :list="list" class="list-group" handle=".handle">
    <li class="group-item" v-for="(element, idx) in list" :key="element.name" >
        <i class="fa fa-align-justify handle"></i>
        <span class="text">{{ element.name }} </span>
        <input type="text" class="form-control" v-model="element.text" />
    </li>
</draggable>

最后附上示例及项目地址

# 示例地址
https://sortablejs.github.io/Vue.Draggable/

# 仓库地址
https://github.com/SortableJS/Vue.Draggable

ok，就分享这么多。希望对大家有所帮助，感兴趣的小伙伴可以去看下哈。