40 lines
1.1 KiB
JavaScript
40 lines
1.1 KiB
JavaScript
// 自定义拖拉指令
|
|
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);
|
|
});
|
|
}
|
|
}
|