console
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>列表拖拽排序 sortable.js</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 14px;
font-family: sans-serif,"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",Arial;
color: #27282b;
background: #fff;
}
a {
text-decoration: none;
color: #27282b;
}
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.u2 {
width: 50%;
margin: 30px auto;
}
.u2 li {
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #e7e7e7;
background: #f9f9f9;
margin-bottom: 5px;
}
.u2 .sortable-chosen {
background: #f1f1f1;
}
</style>
</head>
<body>
<div class="wrapper" id="app">
<ul class="u2">
<li v-for="(v, i) of aList" :data-id="v.id">{{ v.label }}</li>
</ul>
</div>
<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
<script src="https://lib.baomitu.com/Sortable/1.10.2/Sortable.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
aList: [
{
id: 1,
label: 'A1',
},
{
id: 2,
label: 'A2',
},
{
id: 3,
label: 'A3',
},
{
id: 4,
label: 'A4',
},
],
}
},
methods: {
sortList(nDom) {
let res = Array.from(nDom.childNodes).reduce((acc, v) => {
return [...acc, this.aList.find(c => c.id == v.getAttribute('data-id'))]
}, [])
console.table( res )
},
},
mounted() {
new Sortable(document.querySelector('.u2'), {
animation: 200,
onEnd: (evt) => {
this.sortList(evt.to)
}
})
}
})
</script>
</body>
</html>