Vue 也能实现拖拽了 (Draggable)

Draggable 是什么

Draggable 是一个轻量级、响应式的 JS 拖放库，由 Shopify 出品。它提供了高级的拖放功能，能够快速进行 DOM 重新排序，并且拥有清晰的 API 和访问标记。

怎么使用 Draggable

第一步: 安装

npm install vue-draggable --save

第二步: 引用

import draggable from 'vuedraggable'
export default{
   components: { draggable  }
}

第三步 : 页面使用

<draggable :options="{group:'people',scroll:true,scrollSensitivity:200}"
    v-model="list"
    @change="change"
    @start="start"
    @end="end"
    :move="move"
    style="display: inline-block; width:190px;height: 200px;overflow: auto">
    <li v-for="(item, index) in list"
        :class="setclass(item,index)"
        :key="index">
        {{item.name}}
    </li>
</draggable>

应用事件

export default{
    methods:{
        change(evt) {
            console.log(evt)
        },
        //start ,end ,add,update, sort, remove 得到的都差不多
        start(evt) {
            console.log(evt)
        },
        // evt里面有两个值，一个evt.added 和 evt.removed  
        // 可以分别知道移动元素的ID和删除元素的ID
        end(evt) {
            console.log(evt)
            evt.item //可以知道拖动的本身
            evt.to    // 可以知道拖动的目标列表
            evt.from  // 可以知道之前的列表
            evt.oldIndex  // 可以知道拖动前的位置
            evt.newIndex  // 可以知道拖动后的位置
        },
        move(evt, originalEvent) {
            console.log(evt)
            console.log(originalEvent) //鼠标位置
        },
        getdata (evt) {
            console.log(evt.draggedContext.element.id)
        },
        datadragEnd (evt) {
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
            console.log(this.tags)
        }
    }
}

属性配置

group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
name 相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
store: null, // @see Store
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中（默认放在被拖动元素同级）
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... },
// if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px