话不多说直接上代码
<template>
<div class="drag">
<div class="area">
<div ref="element" class="content" v-drag draggable="false">
<p>文字网页</p>
</div>
</div>
</div>
</template>
<script >
export default {
data() {
return {
dd: "",
inout: "",
};
},
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;
const width = document.querySelector(".area").clientWidth;
const height = document.querySelector(".area").clientHeight;
if (l >= width - 100) {
l = width - 100;
} else if (l <= 0) {
l = 0;
}
if (t >= height - 100) {
t = height - 100;
} else if (t <= 0) {
t = 0;
}
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
},
},
};
</script>
<style>
.drag {
position: relative;
}
.area{
width: 500px;
height: 500px;
background-color: red
}
.content {
position: absolute;
height: 100px;
width: 100px;
background-color: #67c23a;
cursor: pointer;
}
</style>