[英]How to make my draggable div not run the onClick function when I finish dragging and my mouse goes up?
So I have a menu div that is draggable.所以我有一个可拖动的菜单 div。 Right now it's working almost perfectly, except when my mouse goes up, it sets off the "onClick" function which triggers a modal to pop up.
现在它工作得几乎完美,除了当我的鼠标上升时,它会触发“onClick” function 触发模式弹出。 I don't want that to happen.
我不希望这种情况发生。 I want that modal to pop up ONLY on click, not after dragging.
我希望该模式仅在单击时弹出,而不是在拖动后弹出。 But when my mouse goes up after dragging, I guess it is being triggered as a click event.
但是当我的鼠标在拖动后上升时,我猜它是作为点击事件触发的。
jsfiddle: https://jsfiddle.net/annahisenberg/ft10ersb/1/ jsfiddle: https://jsfiddle.net/annahisenberg/ft10ersb/1/
Code:代码:
constructor(props) {
super(props);
this.state = {
x: this.props.x,
y: this.props.y,
showMoreOptionsPopup: false,
showHelpModal: false
};
this.reff = React.createRef();
}
componentDidMount() {
this.pos1 = 0;
this.pos2 = 0;
this.pos3 = 0;
this.pos4 = 0;
}
dragMouseDown = e => {
e.preventDefault();
this.pos3 = e.clientX;
this.pos4 = e.clientY;
document.onmouseup = this.closeDragElement;
document.onmousemove = this.elementDrag;
};
elementDrag = e => {
e.preventDefault();
this.pos1 = this.pos3 - e.clientX;
this.pos2 = this.pos4 - e.clientY;
this.pos3 = e.clientX;
this.pos4 = e.clientY;
this.setState({
y: this.reff.current.offsetTop - this.pos2 + "px",
x: this.reff.current.offsetLeft - this.pos1 + "px"
});
};
closeDragElement = () => {
document.onmouseup = null;
document.onmousemove = null;
};
showMoreOptionsPopup = () => {
this.setState({
showMoreOptionsPopup: !this.state.showMoreOptionsPopup
});
};
render() {
return (
<div>
{this.state.showMoreOptionsPopup && (
<div
id="more_options_popup"
style={{
left: this.reff.current.offsetLeft - 170 + "px",
top: this.reff.current.offsetTop - 130 + "px"
}}
>
Help Doc
</div>
)}
<div
id="more_options_button"
onClick={this.showMoreOptionsPopup}
style={{ left: this.state.x, top: this.state.y }}
onMouseDown={this.dragMouseDown}
ref={this.reff}
>
{this.state.showMoreOptionsPopup ? (
<Icon name="close" />
) : (
<Icon name="menu" />
)}
</div>
</div>
);
}
}
You could measure the time that has passed since < mouse.press > and < mouse.release >.您可以测量自 <mouse.press> 和 <mouse.release> 以来经过的时间。
If it has been no longer than ~100ms then it probably was a "click" and not a "drag".如果它不超过〜100ms,那么它可能是“点击”而不是“拖动”。
You can also implement < mouse.position.change > with some < Δ position > (~10px)您还可以实现 < mouse.position.change > 与一些 <Δ position > (~10px)
(so that a slight movement of a cursor when pressing a button won't register as "drag"). (因此按下按钮时 cursor 的轻微移动不会注册为“拖动”)。
If you combine both of those factors, determining whether it was a "click" or a "drag" is easy.如果将这两个因素结合起来,确定是“点击”还是“拖动”很容易。
I would just, on click, set onClick
to null
and set onMouseUp
to set onClick
to whatever functionality you want:我只需单击一下,将
onClick
设置为null
并设置onMouseUp
以将onClick
设置为您想要的任何功能:
<element onClick="" onMouseUp="this.onClick = <something>"></element>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.