这篇文章主要介绍了前端实现界面元素拖拽功能的3种方式,三种方法分别是纯HTML+CSS+JS、Vue模板和Vue全局指令,每种方法都通过监听鼠标事件来实现元素的拖动功能,并通过控制阀来确保只有在指定区域按下鼠标时才开始拖动,需要的朋友可以参考下 
目录
一、纯HTML+CSS+JS实现；二、VUE模板实现；三、VUE全局指令实现；总结一、纯HTML+CSS+JS实现；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="draggableDialog"> <div class="dialog-header">弹框标题</div> <div class="dialog-content">弹框内容</div></div></body><style> #draggableDialog { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 10px;}.dialog-header { cursor: move; background-color: #f0f0f0; padding: 5px;}</style><script>const dialog = document.getElementById('draggableDialog');const dialogHeader = dialog.querySelector('.dialog-header');let isDragging = false;let offsetX, offsetY;dialogHeader.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - dialog.offsetLeft; offsetY = e.clientY - dialog.offsetTop;});document.addEventListener('mousemove', (e) => { if (isDragging) { dialog.style.left = e.clientX - offsetX + 'px'; dialog.style.top = e.clientY - offsetY + 'px'; }});document.addEventListener('mouseup', () => { isDragging = false;});</script></html>实现原理：使用js事件监听，监听document全局DOM的鼠标移动事件，当触发事件后，目标元素将会随鼠标一起偏移(移动)相对应的距离；因目标元素并非一直需要跟随鼠标移动，于是通过给目标元素指定区域
dialogHeader添加鼠标按下事件配合isDragging控制阀，实现只有当鼠标在指定区域按下才能实现拖动目标元素的效果。
二、VUE模板实现；
<template> <div id="draggableDialog" ref="dialog"> <div class="dialog-header" @mousedown="startDrag($event)">弹框标题</div> <div class="dialog-content">弹框内容</div> </div></template> <script>export default { data() { return { isDragging: false, offsetX: 0, offsetY: 0 }; }, methods: { startDrag(event) { this.isDragging = true; this.offsetX = event.clientX - this.$refs.dialog.offsetLeft; this.offsetY = event.clientY - this.$refs.dialog.offsetTop; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, drag(event) { if (this.isDragging) { this.$refs.dialog.style.left = event.clientX - this.offsetX + 'px'; this.$refs.dialog.style.top = event.clientY - this.offsetY + 'px'; } }, stopDrag() { this.isDragging = false; document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); } }};</script> <style>#draggableDialog { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 10px;} .dialog-header { cursor: move; background-color: #f0f0f0; padding: 5px;}</style>原理同上；
三、VUE全局指令实现；
Vue.directive('drag', { bind(el) { el.onmousedown = function(e) { let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; document.onmousemove = function(e) { let left = e.clientX - disX; let top = e.clientY - disY; if (left < 0) left = 0; if (top < 0) top = 0; if (left > document.documentElement.clientWidth - el.offsetWidth) left = document.documentElement.clientWidth - el.offsetWidth; if (top > document.documentElement.clientHeight - el.offsetHeight) top = document.documentElement.clientHeight - el.offsetHeight; el.style.left = left + 'px'; el.style.top = top + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; }});
