<template>
<div class="contanier" v-drag >
<!-- <div class="drag-item"></div> -->
</div>
</template>
<script>
export default {
data() {
return {
}
},
// 自定义指令 —— 拖动div
directives: {
drag(el) {
let oDiv = el // 当前元素
// let self = this // 上下文
// 禁止选择网页上的文字
document.onselectstart = function () {
return false
}
oDiv.onmousedown = function (e) {
// 鼠标按下,计算当前元素距离可视区的距离
let disX = e.clientX - oDiv.offsetLeft
let disY = e.clientY - oDiv.offsetTop
document.onmousemove = function (e) {
// 通过事件委托,计算移动的距离
let l = e.clientX - disX
let t = e.clientY - disY
// 移动当前元素
oDiv.style.left = l + 'px'
oDiv.style.top = t + 'px'
}
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
// return false不加的话可能导致黏连,就是拖到一个地方时div粘在鼠标上不下来,相当于onmouseup失效
return false
}
}
},
}
</script>
<style scoped lang="scss">
.contanier {
position:absolute;
top:100px;
left: 100px;
width: 100px;
height: 100px;
background: red;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
</style>
网友评论