div 的拖动且不影响 原有页面说我点击交互
作者：互联网
HTML：
<div class="kongtiaojifang" ref="kongtiao" @mousedown="mouseDownHandleelse($event)" @mouseup="mouseUpHandleelse($event)" > </div>
js :
// 拖动div
mouseDownHandleelse(event) {
console.log('eventeventeventeventeventeventeventeventeventevent', event)
console.log('this.$refs.kongtiao', this.$refs.kongtiao)
this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft
this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
event.currentTarget.style.cursor = 'move'
window.onmousemove = this.mouseMoveHandleelse
},
mouseMoveHandleelse(event) {
const moveLeft = event.pageX - this.moveDataelse.x + 'px'
const moveTop = event.pageY - this.moveDataelse.y + 'px'
this.$refs.kongtiao.style.left = moveLeft
this.$refs.kongtiao.style.top = moveTop
},
mouseUpHandleelse(event) {
window.onmousemove = null
event.currentTarget.style.cursor = 'move'
console.log('鼠标松开了')
},
css:
.kongtiaojifang{
z-index: 9999;
background-color: rgb(245, 245, 245);
width:1000px;height:auto;
position: fixed;
top: 150px;
left: 550px;
cursor: pointer;
}
在 vue 中 要在data 中 申明
moveDataelse: {
x: null,
y: null,
},
标签：style,moveDataelse,拖动,refs,kongtiao,div,null,event,页面 来源： https://www.cnblogs.com/chenlongsheng/p/16399538.html