原生JS拖拽悬浮窗
先看效果
在项目中总会遇到一些悬浮窗拖拽的需求，大多数的时候，我们使用的是element的dialog加上别人写的文档实现dialog进行拖拽。
但是众所周知，element的如果改里面的样式可能会出现各种问题，特别是项目中大量修改element样式时，而且我也看过测评，如果只是v-if或者使用dialog内置的销毁机制的话，并不会完全销毁dialog，这就会带来一定的性能损耗，我们的网页也会越来越卡（当页面上大量使用dialog时会出现）。
所以在一些小的悬浮窗需求下，就可以自己写一些拖拽的功能。
下面是纯html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dragable</title>
<style>
.darg-target {
width: 200px;
height: 200px;
border: 1px solid #000;
position: fixed;
}
.darg_header {
height: 40px;
line-height: 40px;
background: #bfa;
cursor: pointer;
}
/* 拖动时的样式 */
.darg_header[draggable="true"]:active,
.darg_header:focus {
/* opacity: 0; */
}
</style>
</head>
<body>
<div class="darg-target" id="darg-target">
<div class="darg_header" id="darg_header" draggable="true" dargstart></div>
</div>
<script>
var clickX = 0;
var clickY = 0;
var targetBox = document.getElementById('darg_header');
targetBox.addEventListener("mousedown",(e) => {
// 获取点击初始位置
clickX = e.offsetX;
clickY = e.offsetY;
})
targetBox.addEventListener("dragstart", (e) => {
// 设置拖拽时跟随虚影为透明
const ghost = e.target.cloneNode(true);
ghost.style.opacity = '0.5'; // 设置透明度
ghost.style.position = 'absolute';
ghost.style.pointerEvents = 'none';
document.body.appendChild(ghost);
e.dataTransfer.setDragImage(ghost, 0, 0);
});
targetBox.addEventListener("drag", (e) => {
// 元素跟随
targetBox.parentElement.style.left = e.clientX - clickX + 'px';
targetBox.parentElement.style.top = e.clientY - clickY + 'px';
});
targetBox.addEventListener("dragend", (e) => {
// 元素放置
targetBox.parentElement.style.left = e.clientX - clickX + 'px';
targetBox.parentElement.style.top = e.clientY - clickY + 'px';
});
</script>
</body>
</html>
可以看的出来，核心就是三个时间监听器，主要步骤就是。
获取当前点击元素位置 获取拖拽过程种元素位置，并通过设置position值进行重定位 获取拖拽结束元素位置，将元素放置
问题：
1.为什么还要写一遍dragend时间监听器？
答：因为drag事件当鼠标放开时元素会闪回原来的位置，而不是最后拖放的位置。所以需要dragend获取放置的位置。
2.clickX、clickY是什么意思，有什么作用？
答：drag事件移动是根据整个元素左上角的作为基准点，如果不设置初始点击位置，就会出现很别扭的偏移现象。
