// 自定义拖拉指令
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);
		});
	}
}