<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 60%;
height: auto;
margin: 50px auto 0;
}
ul li {
position: relative;
padding: 10px 0;
border: 1px solid #000000;
text-align: center;
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<ul ref='parant'>
<li v-for="(item, index) in items" draggable='true' @dragstart='drag($event)' @drop='drop($event)' @dragover='allowDrop($event)'>
{{item.num}}--{{item.txt}}
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
items: [
{num: 1,txt:'內容1'},
{num: 2,txt:'內容2'},
{num: 3,txt:'內容3'},
{num: 4,txt:'內容4'},
{num: 5,txt:'內容5'},
{num: 6,txt:'內容6'}
],
moveDom: '',
changeDom: '',
startY: 0,
endY: 0,
},
mounted () {
},
methods: {
drag:function(event){ //start
// console.log(event)
this.moveDom = event.currentTarget
this.startY = event.clientY
},
drop:function(event){ //end
event.preventDefault();
this.changeDom = event.currentTarget
this.endY = event.clientY
if (this.endY - this.startY >= 0) {
// console.log('xia')
this.$refs.parant.insertBefore(this.moveDom, this.changeDom.nextSibling)
} else {
// console.log('shang')
this.$refs.parant.insertBefore(this.moveDom, this.changeDom)
}
},
allowDrop:function(event){ //moving
event.preventDefault()
this.endY = event.clientY
this.changeDom = event.currentTarget
if (this.endY - this.startY >= 0) {
// console.log('xia')
this.$refs.parant.insertBefore(this.moveDom, this.changeDom.nextSibling)
} else {
// console.log('shang')
this.$refs.parant.insertBefore(this.moveDom, this.changeDom)
}
}
}
})
</script>
</body>
</html>