?業務需要：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>注意：綁定的元素一定要設置css樣式“position: absolute;”，父元素可設置“overflow: hidden”，防止出現滾動條。?
