vue快速实现拖拽功能的插件

在vue中时常会用到拖拽的功能，自己写可能会耗时耗力还不一定写的好看，今天小编来给大家推荐一款基于Sortable.js实现的vue拖拽插件——Vue.Draggable。

支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。

安装方式

yarn add vuedraggable
npm i -S vuedraggable

常用属性说明

group :group= "name"，相同的组之间可以相互拖拽
delay :delay= "0", 鼠标按下后多久可以拖拽
disabled :disabled= "true",是否启用拖拽组件 默认为true, 如果需要通过鼠标事件来开启就用这个
animation 拖动时的动画效果，还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handle :handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动
filter :filter=".unmover" 设置了unmover样式的元素不允许拖动
draggable :draggable=".item" 那些元素是可以被拖动的    
ghostClass :ghostClass="ghostClass" 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true    
chosenClass :ghostClass="hostClass" 被选中目标的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true    
dragClass :dragClass="dragClass"拖动元素的样式，你的自定义样式可能需要加!important才能生效，并把forceFallback属性设置成true    
dataIdAttr dataIdAttr: 'data-id'    
forceFallback 默认false，忽略HTML5的拖拽行为，因为h5里有个属性也是可以拖动，你要自定义ghostClass chosenClass dragClass样式时，建议forceFallback
设置为true    
fallbackClass 默认false，克隆的DOM元素的类名    
allbackOnBody 默认false，克隆的元素添加到文档的body中    
fallbackTolerance 拖拽之前应该移动的px    
scroll 默认true,有滚动区域是否允许拖拽    
scrollFn 滚动回调函数    
scrollSensitivity 距离滚动区域多远时，滚动滚动条    
scrollSpeed 滚动速度

Vue实例

<script>
        // 全局注册组件
        Vue.component('vuedraggable', window.vuedraggable)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable: window.vuedraggable,//当前页面注册组件
            },
            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>