Demo

https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif

安装

npm install vuedraggable -S

引用及标签

import draggable from 'vuedraggable'

components: {
    draggable
}

eg

<template>
    <div>
        <draggable v-model="list">
            <div v-for="(item,index) in list" :key="index">
                {{item.name}}
            </div>
        </draggable>
    </div>
</template>
<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                list: [{
                    name:"One",
                },{
                    name:"Two",
                },{
                    name:"Three",
                }]
            }
        }
    }
</script>

特殊-只想要元素中的某个按钮可以带动整个div拖拽

<!--  这样就可以实现拖拽不了div，但是可以通过拖拽按钮来出发拖拽事件-->
<draggable v-model="questionList" handle=".move">
  <div style="width:500px;height:500px"><button class='move'/><div>
  <div style="width:500px;height:500px"><button class='move'/><div>
</draggable>

特殊-某些元素不可拖拽

<!--  这样就可以实现不能拖拽class为undraggable的Dom节点 -->
<draggable v-model="questionList" .filter=".undraggable">