<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顺序调换</title>
<style>
</style>
</head>
<body>
<div >
<slot />
</ul>`
};
const SortableItem = {
mixins: [ElementMixin],
props: ['item','items'],
template: `
<li class="slicksortItem">
<div :>个位置 </font> 我现在的位置是{{item.id}}</div>
</li>
`,
data() {
return {
i: 0,
m: ''
};
},
methods: {
rep() {
//要去的位置
let go = this.m;
if (this.item.id > go) {
this.item.id = parseInt(go) - 1;
} else {
this.item.id = parseInt(go) + 1;
}
//排序
this.items.sort(function(a, b) {
return a.id - b.id;
})
//重新编号
this.items.forEach(function(e, i) {
e.id = ++i;
})
//清空输入的值
this.m = '';
}
}
};
const ExampleVue = {
name: 'Example',
template: `
<div class="root">
<SortableList v-model="items" lockAxis="y" @input="getArr">
<SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item" :items="items"></SortableItem>
</SortableList>
</div>
`,
components: {
SortableItem,
SortableList
},
data() {
return {
items: arr,
i: 0
};
},
methods: {
getArr(list) {
//重新编号
this.items.forEach(function(e, i) {
e.id = ++i;
})
}
}
};
const app = new Vue({
el: '#app',
render: h => h(ExampleVue),
});
</script>
</html>