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>
特殊-只想要元素中的某個按鈕可以帶動整個div拖拽
<!-- 這樣就可以實現(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>
特殊-某些元素不可拖拽
<!-- 這樣就可以實現(xiàn)不能拖拽class為undraggable的Dom節(jié)點 -->
<draggable v-model="questionList" .filter=".undraggable">
