马文的地下室

学习笔记《Vue Draggable》

2017-05-11  本文已影响1299人  马文Marvin

Vue Draggable 是一个实现拖拽功能的 Vue 组件，找了一圈发现只有这个组件有多了 list 之间互相拖拽的功能实现，使用下来也觉得功能蛮齐备的，组件地址：
https://github.com/SortableJS/Vue.Draggable/

Vue Draggable 的实现是基于 Sortable 这个有10000多个 star 的拖拽基本库，所以功能部分的稳健一点也不让人意外：
https://github.com/RubaXa/Sortable

基本使用

使用的方法官方文档介绍的很清晰，不再赘述：
https://github.com/SortableJS/Vue.Draggable

Vue Draggable 官当的 Demo 做的很潦草，不如直接看 Sortable 的 Demo 更为直观：
http://rubaxa.github.io/Sortable/

Options

Vue Draggable 可以直接使用了 Sortable 的配置项：

var sortable = new Sortable(el, {
    group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
    sort: true,  // sorting inside list
    delay: 0, // time in milliseconds to define when the sorting should start
    disabled: false, // Disables the sortable if set to true.
    store: null,  // @see Store
    animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
    handle: ".my-handle",  // Drag handle selector within list items
    filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
    preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
    draggable: ".item",  // Specifies which items inside the element should be draggable
    ghostClass: "sortable-ghost",  // Class name for the drop placeholder
    chosenClass: "sortable-chosen",  // Class name for the chosen item
    dragClass: "sortable-drag",  // Class name for the dragging item
    dataIdAttr: 'data-id',

    forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in

    fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
    fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
    fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.        
    
    scroll: true, // or HTMLElement
    scrollFn: function(offsetX, offsetY, originalEvent) { ... }, // 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

    setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
        dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
    },

    // Element is chosen
    onChoose: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },

    // Element dragging started
    onStart: function (/**Event*/evt) {
        evt.oldIndex;  // element index within parent
    },

    // Element dragging ended
    onEnd: function (/**Event*/evt) {
        evt.oldIndex;  // element's old index within parent
        evt.newIndex;  // element's new index within parent
    },

    // Element is dropped into the list from another list
    onAdd: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        evt.from;  // previous list
        // + indexes from onEnd
    },

    // Changed sorting within list
    onUpdate: function (/**Event*/evt) {
        var itemEl = evt.item;  // dragged HTMLElement
        // + indexes from onEnd
    },

    // Called by any change to the list (add / update / remove)
    onSort: function (/**Event*/evt) {
        // same properties as onUpdate
    },

    // Element is removed from the list into another list
    onRemove: function (/**Event*/evt) {
        // same properties as onUpdate
    },

    // Attempt to drag a filtered element
    onFilter: function (/**Event*/evt) {
        var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
    },

    // Event when you move an item in the list or between lists
    onMove: function (/**Event*/evt, /**Event*/originalEvent) {
        // Example: http://jsbin.com/tuyafe/1/edit?js,output
        evt.dragged; // dragged HTMLElement
        evt.draggedRect; // TextRectangle {left, top, right и bottom}
        evt.related; // HTMLElement on which have guided
        evt.relatedRect; // TextRectangle
        originalEvent.clientY; // mouse position
        // return false; — for cancel
    },
    
    // Called when creating a clone of element
    onClone: function (/**Event*/evt) {
        var origEl = evt.item;
        var cloneEl = evt.clone;
    }
});

Vue Draggable 隐藏了 Options 中的事件：

Note that all the method starting by "on" will be ignored as draggable component expose the same API via events.

事件

前面的这些被 Vue Draggable 隐藏的事件（一共10个），只要绑定在 Vue 的 DOM 上就可以被组件调用：

<draggable :list="list" :move="checkMove">

import draggable from 'vuedraggable'
export default {
    checkMove(event)
    {
      console.log(event);
    }
  },
  components: {
    draggable,
  }
}

event 参数对象

所有10个事件都有一个 event 参数，这个参数一些相关的对象：

但是 move 事件所支持的 event 参数对象有所不同：

对于 move 事件，Vue Draggable 还添加了额外的对象：

（其他内容等遇到的时候会再补充）

上一篇下一篇

猜你喜欢

热点阅读