拖拽元素绑定：
<div class="add-twin-wrap-container"><div class="add-twin-wrap" @click.stop><p class="title" @mousedown="onDragStart">添加场景类型实例<span class="icon iconfont avw-cancel" @click="$emit('close-dialog')"></span></p><div class="twin-cont">...........</div></div></div>初始化元素样式：
mounted() {// 初始化 left/top，使拖动计算准确const dialog = this.$el.querySelector('.add-twin-wrap');const rect = dialog.getBoundingClientRect();dialog.style.left = `${rect.left}px`;dialog.style.top = `${rect.top}px`;},
添加拖拽监听方法：
methods: {// ...原来的方法不动onDragStart(e) {const dialog = this.$el.querySelector('.add-twin-wrap');const rect = dialog.getBoundingClientRect();// 鼠标点击位置相对弹窗左上角的偏移const offsetX = e.clientX - rect.left;const offsetY = e.clientY - rect.top;// 防止选中文字document.body.style.userSelect = 'none';const onMouseMove = (moveEvent) => {const left = moveEvent.clientX - offsetX;const top = moveEvent.clientY - offsetY;// 限制不要拖出屏幕const maxLeft = window.innerWidth - rect.width;const maxTop = window.innerHeight - rect.height;dialog.style.left = Math.min(Math.max(0, left), maxLeft) + 'px';dialog.style.top = Math.min(Math.max(0, top), maxTop) + 'px';};const onMouseUp = () => {document.removeEventListener('mousemove', onMouseMove);document.removeEventListener('mouseup', onMouseUp);document.body.style.userSelect = '';};document.addEventListener('mousemove', onMouseMove);document.addEventListener('mouseup', onMouseUp);},
}
)
