优化客服消息

src/directives/draggable.js

@@ -0,0 +1,39 @@
+// 自定义拖拉指令
+export default{
+	mounted(el) {
+		let startX, startY, initialMouseX, initialMouseY;
+		const parent = el.parentElement;
+
+		function onMouseMove(event) {
+			const dx = event.clientX - initialMouseX;
+			const dy = event.clientY - initialMouseY;
+
+			let newLeft = startX + dx;
+			let newTop = startY + dy;
+
+			// 确保拖拽元素不会超出父级容器的范围
+			const maxX = parent.clientWidth - el.offsetWidth;
+			const maxY = parent.clientHeight - el.offsetHeight;
+
+			newLeft = Math.max(0, Math.min(newLeft, maxX));
+			newTop = Math.max(0, Math.min(newTop, maxY));
+
+			el.style.left = newLeft + 'px';
+			el.style.top = newTop + 'px';
+		}
+
+		function onMouseUp() {
+			document.removeEventListener('mousemove', onMouseMove);
+			document.removeEventListener('mouseup', onMouseUp);
+		}
+
+		el.addEventListener('mousedown', (event) => {
+			startX = el.offsetLeft;
+			startY = el.offsetTop;
+			initialMouseX = event.clientX;
+			initialMouseY = event.clientY;
+			document.addEventListener('mousemove', onMouseMove);
+			document.addEventListener('mouseup', onMouseUp);
+		});
+	}
+}