js实现元素可拖拽方法

业务需要：Vue+element plus实现对弹框进行拖拽，并可拖拽到显示页面的外面，而element提供的拖拽只能在当前页面不可超出。所以手写了拖拽方法。

实现效果

对元素进行拖拽

拖拽方法

     function dragElement(ele) {ele.addEventListener("mousedown", function (e) {// 取消浏览器默认事件e.preventDefault();// 存储鼠标位置var mouseX = e.clientX;var mouseY = e.clientY;// 存储元素当前位置var initX = draggableElement.offsetLeft;var initY = draggableElement.offsetTop;// 添加鼠标移动事件监听器document.addEventListener("mousemove", onMouseMove);// 添加鼠标抬起事件监听器document.addEventListener("mouseup", onMouseUp);function onMouseMove(e) {// 计算鼠标移动的距离var deltaX = e.clientX - mouseX;var deltaY = e.clientY - mouseY;if (window.innerWidth - 20 > e.clientX && e.clientX > 20) {// 将元素移动到新的位置，这里的加上deltaX和deltaY是因为我们需要将元素移动到鼠标点击位置的右边和下边draggableElement.style.left = initX + deltaX + "px";}if (window.innerHeight - 20 > e.clientY && e.clientY > 20) {draggableElement.style.top = initY + deltaY + "px";}}function onMouseUp() {// 移除鼠标移动和抬起事件监听器document.removeEventListener("mousemove", onMouseMove);document.removeEventListener("mouseup", onMouseUp);}});}

对方法进行使用

<divid="box"style="width: 100px;height: 100px;background-color: brown;position: absolute;"
></div><script>const draggableElement = document.querySelector("#box");dragElement(draggableElement)
</script>