效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/92dbeab81fb842ca8f9f22b70c619f33.png
直接复制即可使用
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#box {
position: absolute;
left: 100px;
top: 100px;
padding: 5px;
background: #fff;
font-size: 12px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
}
#main {
border: 1px solid #7700FF;
background: white;
}
#bar {
line-height: 24px;
background: #beceeb;
border-bottom: 1px solid #7700FF;
padding-left: 5px;
cursor: move;
}
#content {
width: 200px;
height: 150px;
padding: 10px 5px;
}
</style>
<body>
<div id="box">
<div id="main">
<div id="bar">拖拽</div>
<div id="content">内容……</div>
</div>
</div>
</body>
<script>
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function (o, key) {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
//拖拽的实现
var startDrag = function (bar, target, callback) {
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function (event) {
params.flag = true;
if (!event) {
event = window.event;
//防止IE文字选中
bar.onselectstart = function () {
return false;
}
}
var e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
};
document.onmouseup = function () {
params.flag = false;
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
};
document.onmousemove = function (event) {
var e = event ? event : window.event;
if (params.flag) {
var nowX = e.clientX, nowY = e.clientY;
var disX = nowX - params.currentX, disY = nowY - params.currentY;
target.style.left = parseInt(params.left) + disX + "px";
target.style.top = parseInt(params.top) + disY + "px";
if (typeof callback == "function") {
callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
}
if (event.preventDefault) {
event.preventDefault();
}
return false;
}
}
};
onload = function () {
startDrag(bar, box);
};
</script>
</html>
vue:
<template>
<div id="box" ref="boxRef" @mousedown="handleMouseDown" :style="{ left: params.left + 'px', top: params.top + 'px' }">
<div id="main">
<div id="bar" ref="barRef">拖拽</div>
<div id="content">内容……</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const params = ref({
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
});
const boxRef = ref(null);
const barRef = ref(null);
const getCss = (o, key) => {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
const handleMouseDown = (event) => {
params.flag = true;
if (!event) {
event = window.event;
barRef.value.onselectstart = () => false;
}
const e = event;
params.currentX = e.clientX;
params.currentY = e.clientY;
params.left = parseInt(getCss(boxRef.value, "left")) || 0;
params.top = parseInt(getCss(boxRef.value, "top")) || 0;
};
const handleMouseUp = () => {
params.flag = false;
};
const handleMouseMove = (event) => {
const e = event ? event : window.event;
if (params.flag) {
const nowX = e.clientX, nowY = e.clientY;
const disX = nowX - params.currentX, disY = nowY - params.currentY;
boxRef.value.style.left = params.left + disX + "px";
boxRef.value.style.top = params.top + disY + "px";
if (event.preventDefault) {
event.preventDefault();
}
return false;
}
};
onMounted(() => {
barRef.value.onmousedown = handleMouseDown;
document.onmouseup = handleMouseUp;
document.onmousemove = handleMouseMove;
});
</script>
<style scoped>
#box {
position: absolute;
padding: 5px;
background: #fff;
font-size: 12px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, .1);
}
#main {
border: 1px solid #7700FF;
background: white;
}
#bar {
line-height: 24px;
background: #beceeb;
border-bottom: 1px solid #7700FF;
padding-left: 5px;
cursor: move;
}
#content {
width: 200px;
height: 150px;
padding: 10px 5px;
}
</style>