0
点赞
收藏
分享

微信扫一扫

基于vuedraggable实现拖拽排序

参考链接:

​​https://github.com/SortableJS/Vue.Draggable​​

基于vuedraggable实现拖拽排序_github

<template>
<div>
<draggable v-model="myArray" group="people" @end="handleEnd">
<div
v-for="(element, index) in myArray"
:key="element.id"
class="m-drag-item"
>
{{ index }}:{{ element.name }}
</div>
</draggable>
</div>
</template>

<script>
//https://github.com/SortableJS/Vue.Draggable
import draggable from 'vuedraggable'

export default {
data() {
return {
myArray: [
{
name: 'vue.draggable',
order: 1,
},
{
name: 'draggable',
order: 2,
},
{
name: 'component',
order: 3,
},
{
name: 'for',
order: 4,
},
{
name: 'vue.js 2.0',
order: 5,
},
{
name: 'based',
order: 6,
},
{
name: 'on',
order: 7,
},
{
name: 'Sortablejs',
order: 8,
},
],
}
},
components: {
draggable,
},
methods: {
handleEnd(e) {
console.log('结束', e, this.myArray)
},
},
}
</script>

<style>
.m-drag-item {
border: 1px solid #ddd;
padding: 5px;
margin: 5px;
cursor: pointer;
}
</style>


举报

相关推荐

0 条评论