<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
<div id="tuozhuai_view">
<!-- -->
<draggable
v-model="fruit"
:options="{group:'people',disabled:istrue}"
@change="change"
@start="start"
@end="end"
>
<div v-for="element in fruit">{{ element }}</div>
</draggable>
{{ fruit }}
<br />
<br />
<draggable v-model="girl" :options="{group:'people'}">
<div v-for="element in girl">{{ element }}</div>
</draggable>
{{ girl }}
</div>
<script type="text/javascript">
new Vue({
el: '#tuozhuai_view',
data: {
istrue: false,
fruit: ['apple', 'banana', 'orage'],
girl: ['linzhil', 'cjk', 'bdyjy']
},
methods: {
change(e) {
console.log(e)
console.log(Object.keys(e).length)
if (Object.keys(e).length > 0) {
console.log('你已经移动过一次了，不要再移动了')
this.istrue = true
}
},
start(e) {
console.log(e)
},
end(e) {
console.log(e)
}
}
})
</script>
注意：配置项写在options里面，不要写在外面，以上代码可以实现拖拽一次，第二次无法拖拽
