Dom*_*omi 10 javascript jquery drag-and-drop onmouseup
如果鼠标按钮在已触发的元素之外释放，则不会触发Javascript事件onmouseup。onmousedown
这会导致 JQuery UI 中的拖放错误：当鼠标按钮在其容器外部释放时，JQuery可拖动元素不会停止拖动（因为该元素在到达其父边界时将停止移动）。重现步骤：
我在最新的 Chrome 和 IE 中看到了这种行为。
有什么解决方法吗？
mouseout我知道我们可以停止在或上拖动容器mouseleave，但我想继续拖动，即使我在父容器之外，就像在谷歌地图中一样（无论您在哪里释放鼠标，它总是停止拖动地图）。
您可以让 mousedown 元素“捕获”指针。那么它总是会收到 mouseup 事件。在 React 中，这可能看起来像这样：
const onPointerDownDiv1 = (event: React.PointerEvent) => {
(event.target as HTMLDivElement).setPointerCapture(event.pointerId);
// Do something ...
};
const onPointerUpDiv1 = (event: React.PointerEvent) => {
(event.target as HTMLDivElement).releasePointerCapture(event.pointerId);
// Do something ...
};
<div
ref={div1}
id="div1"
className="absolute top-[200px] left-[390px] h-8 w-8 bg-red-300"
onPointerDown={onPointerDownDiv1}
onPointerUp={onPointerUpDiv1}
/>
这是使用“plain vanilla”html + javascript 的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div
id="div1"
style="
position: absolute;
left: 50px;
top: 50px;
width: 20px;
height: 20px;
background-color: red;
"
></div>
</body>
<script>
let isDragging = false;
let offsetX = 0;
let offsetY = 0;
let divElement = document.getElementById("div1");
divElement.addEventListener("pointerdown", onPointerDown);
divElement.addEventListener("pointermove", onPointerMove);
divElement.addEventListener("pointerup", onPointerUp);
function onPointerDown(event) {
divElement.setPointerCapture(event.pointerId);
offsetX = event.clientX - divElement.offsetLeft;
offsetY = event.clientY - divElement.offsetTop;
isDragging = true;
}
function onPointerMove(event) {
if (isDragging) {
divElement.style.left = (event.clientX - offsetX).toString() + "px";
divElement.style.top = (event.clientY - offsetY).toString() + "px";
}
}
function onPointerUp(event) {
divElement.releasePointerCapture(event.pointerId);
isDragging = false;
}
</script>
</html>
| 归档时间： |
|
| 查看次数： |
9553 次 |
| 最近记录： |