Vuedraggable 拖拽组件插件

Vuedraggable 拖拽组件插件

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

注意：只支持vue2

安装：npm i -S vuedraggable
使用：在需要的组件里引入vuedraggable

1. 简单使用

<template>
  <div>
    <div>演示拖拽功能</div>
    <draggable chosenClass="chosen" forceFallback="true" group="people"  @start="start" @end="end" animation="500">
      <div class="item" v-for="item in 10" :key="item">{{ item }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  methods: {
    start(e) {
      console.log(e);
    },
    end(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="less" scoped>
     .item{
        margin: 0 auto;
        width: 400px;
        height: 50px;
        line-height: 50px;
        background-color: #f1f3f4;
        margin: 10px auto;
        border: 2px dashed transparent;

        &:hover{
            border: 2px dashed blueviolet;
        }
    }
</style>

2.属性说明

属性名称	说明
group	:group= “name”，相同的组之间可以相互拖拽
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	滚动速度

更多使用技巧可以看文档：[vue.draggable中文文档]