Vue中draggable拖拉拽组件使用

安装

npm i vuedraggable -S

属性

group: { name: "...", pull: [true, false, clone], 
tag: 'td' // 默认div，设置draggable标签解析html标签
v-model：data // 绑定数据列表
put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入
sort: true,  // 内部拖动排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: ".my-handle",  // 在列表项中拖动句柄选择器，设置某些地方拖动才有效。
filter: ".ignore-elements",  // 不能拖拽的选择器(字符串 class)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item",  // 指定元素中的哪些项应该是可拖动的class。
ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen",  // 设置被选中的元素的class
dragClass: "sortable-drag",  //拖动元素的class。
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) { ... },
scrollSensitivity: 30, // px
scrollSpeed: 10, // px

事件

start (evt) {} // 刚开始拖动时候触发
add (evt) {} // 拖拽新增的时候触发
remove (evt) {} // 从列表拖走，移除触发
update (evt) {} // 列表更新触发
end (evt) {} // 和start对应，拖拽完了触发
choose(evt) {} // 选择拖拽元素触发
sort (evt) {} // 排序触发
change (evt) {} // 这个很重要，如果数据不是整个提交，单个提交数据的时候就会用到它 evt.added.element / evt.removed.element如果这个列表添加元素就会added的数据，如果删除元素就是removed的元素，还会获取到移动和删除的所在位置index
:move (evt, dragevt) {} // 这个也很重要，在两个列表相互拖拽的时候，有时候需要更新ui，在接口还没有更新之前，所以就会用到move，他是把元素从一个列表拖到另一个列表的瞬间触发，这时候可以给原来的位置设置元素样式等等。

vue实例页面展示

<template>
    <div class="fluid container">
        <div class="form-group form-group-lg panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Sortable control</h3>
        </div>
        <div class="panel-body">
            <div class="checkbox">
            <label><input type="checkbox" v-model="editable">Enable drag and drop</label>
            </div>
            <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
        </div>
        </div>

        <div class="col-md-3">
        <!-- <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false">
            <transition-group type="transition" :name="'flip-list'">
            <li class="list-group-item" v-for="element in list" :key="element.order">
                <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
                {{element.name}}
                <span class="badge">{{element.order}}</span>
            </li>
            </transition-group>
        </draggable> -->
        <draggable v-model="list" v-bind="dragOptions" :move="onMove" @end="draggingEnd">
            <transition-group name="no" class="list-group" tag="ul">
            <li class="list-group-item" v-for="element in list" :key="element.order">
                <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
                {{element.name}}
                <span class="badge">{{element.order}}</span>
            </li>
            </transition-group>
        </draggable>
        </div>

        <div class="col-md-3">
        <draggable element="span" v-model="list2" v-bind="dragOptions" :move="onMove" @end="draggingEnd">
            <transition-group name="no" class="list-group" tag="ul">
            <li class="list-group-item" v-for="element in list2" :key="element.order">
                <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
                {{element.name}}
                <span class="badge">{{element.order}}</span>
            </li>
            </transition-group>
        </draggable>
        </div>

        <div class="list-group col-md-3">
        <pre>{{listString}}</pre>
        </div>
        <div class="list-group col-md-3">
        <pre>{{list2String}}</pre>
        </div>
    </div>
</template>

<script>
    import draggable from "vuedraggable";
    const message = [
        "vue.draggable",
        "draggable",
        "component",
        "for",
        "vue.js 2.0",
        "based",
        "on",
        "Sortablejs"
    ];

    export default {
        name: "hello",
        components: {
            draggable
        },
        data() {
            return {
            list: message.map((name, index) => {
                return { name, order: index + 1, fixed: false };
            }),
            list2: [],
            editable: true,
            isDragging: false,
            delayedDragging: false
            };
        },
        methods: {
            // 恢复默认排序(以order顺序排序)
            orderList() {
                this.list = this.list.sort((one, two) => {
                    return one.order - two.order;
                });
            },
            // 移动中调用
            onMove({ relatedContext, draggedContext }) {
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                );
            },
            // 移动完调用
            draggingEnd(){
                console.log(this.listString);
                console.log(this.list2String);
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 0,
                    group: "description",
                    disabled: !this.editable,
                    ghostClass: "ghost"
                };
            },
            listString() {
                return JSON.stringify(this.list, null, 2);
            },
            list2String() {
                return JSON.stringify(this.list2, null, 2);
            }
        },
        watch: {
            isDragging(newValue) {
                if (newValue) {
                    this.delayedDragging = true;
                    return;
                }
                this.$nextTick(() => {
                    this.delayedDragging = false;
                });
            }
        }
    };
</script>

<style>
    .flip-list-move {
    transition: transform 0.5s;
    }

    .no-move {
    transition: transform 0s;
    }

    .ghost {
    opacity: 0.5;
    background: #c8ebfb;
    }

    .list-group {
    min-height: 20px;
    }

    .list-group-item {
    cursor: move;
    }

    .list-group-item i {
    cursor: pointer;
    }
</style>

官方文档

https://github.com/SortableJS/Vue.Draggable
https://github.com/David-Desmaisons/draggable-example