vue2.0拖拽排序js用dragstart、drop、dragover来实现

最新推荐文章于 2024-07-16 10:31:22 发布

m_uncle

最新推荐文章于 2024-07-16 10:31:22 发布

阅读量1.6w

点赞数 1

分类专栏：效果文章标签： vue 拖动 dragstart、drop、dragover

本文链接：https://blog.csdn.net/m_uncle/article/details/80455695

版权

效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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/vue@2.5.16/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>

m_uncle

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
vue2.0拖拽排序js用dragstart、drop、dragover来实现

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 0; } .box { width: 60%; hei
复制链接

扫一扫

专栏目录