Demo

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

安裝

npm install vuedraggable -S

引用及標(biāo)簽

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>

特殊-只想要元素中的某個(gè)按鈕可以帶動(dòng)整個(gè)div拖拽

<!--  這樣就可以實(shí)現(xiàn)拖拽不了div，但是可以通過拖拽按鈕來出發(fā)拖拽事件-->
<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>

特殊-某些元素不可拖拽

<!--  這樣就可以實(shí)現(xiàn)不能拖拽class為undraggable的Dom節(jié)點(diǎn) -->
<draggable v-model="questionList" .filter=".undraggable">