前言
最近在开发中需要做一个可以任意拖拽的节点的功能，然后使用到了vue.draggable这个插件，发现它功能很强大而且很好用，能够支持移动设备，支持vue2和vue3。
1.简介：
vue.draggable中文文档地址:www.itxst.com/vue-draggab…
vue3版中文文档地址：https://www.itxst.com/vue-draggable-next/tutorial.html
非vue文档地址：https://www.itxst.com/sortablejs/neuinffi.html
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。
2.使用方法
- 使用npm或yarn安装
yarn add vuedraggable
npm i -S vuedraggable
浏览器直接引用js方式
<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
2.属性说明：建议使用sortable.js文档，有很详细的例子：
<template>
<div>
<div>{{drag?'拖拽中':'拖拽停止'}}</div> <!--使用draggable组件-->
<draggable v-model="myArray" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
<transition-group>
<div class="item" v-for="element in myArray" :key="element.id">
{{element.name}}
</div>
</transition-group>
</draggable>
</div>
</template>
<style scoped>
/*被拖拽对象的样式*/
.item {
padding: 6px;
background-color: #fdfdfd;
border: solid 1px #eee;
margin-bottom: 10px;
cursor: move;
}
/*选中样式*/
.chosen {
border: solid 2px #3089dc !important;
}
</style>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
//注册draggable组件
components: { draggable, },
data() {
return {
drag:false,
//定义要被拖拽对象的数组
myArray:[
{people:'cn',id:1,name:'www.itxst.com'},
{people:'cn',id:2,name:'www.baidu.com'},
{people:'cn',id:3,name:'www.taobao.com'},
{people:'us',id:4,name:'www.google.com'}
]
};
},
methods: {
//开始拖拽事件
onStart(){
this.drag=true;
},
//拖拽结束事件
onEnd() {
this.drag=false;
},
},
};
</script>
