vue.draggable中文文档

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子，使用起来特别简单对被拖拽元素也没有CSS样式的特殊要求。

文档修订

2022-05-15 修订group属性文档，空数组无法拖入的问题

官方网站

https://github.com/SortableJS/Vue.Draggable

其他版本文档

非vue版中文文档请访问: sortable.js
vue3版中文文档请访问: vue.draggable.next

文件下载

下载vuedraggable文件

下载sortable文件

下载vue文件

NPM或yarn安装方式

yarn add vuedraggable
npm i -S vuedraggable

UMD浏览器直接引用JS方式

属性说明

如果下面的属性说明未能完全看明白，请访问非vue版 sortable.js里面有更详细的例子。

属性名称	说明
group	:group= "name"，相同的组之间可以相互拖拽或者 { name: "...", pull: [true, false, 'clone', array , function], put: [true, false, array , function] }
sort	:sort= "true",是否开启内部排序,如果设置为false,它所在组无法排序，在其他组可以拖动排序
delay	:delay= "0", 鼠标按下后多久可以拖拽
touchStartThreshold	鼠标移动多少px才能拖动元素
disabled	:disabled= "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	滚动速度

完整例子

<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>

在线试一试

浏览器umd开发模式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <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>
    <style scoped>
       /*被拖拽对象的样式*/
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
        } 
        .item:hover {
                background-color: #f1f1f1;
                cursor: move;
            }
            /*选中样式*/
        .chosen {
            border: solid 2px #3089dc !important;
        }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <div>{{drag?'拖拽中':'拖拽停止'}}</div>
        <draggable v-model="myArray" chosen-class="chosen" force-fallback="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>
    <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>
</body>
</html>