vue2.0拖拽排序js用dragstart、drop、dragover來實現


<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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章