是否可以捕获网格项的单击并取消拖动事件?我想要在单击网格项时打开一个模式窗口,但我不知道如何实现它。我使用onClick捕获点击,但是stopPropagation和preventDefault并不阻止开始拖拽过程的mousedown事件。
发布于 2016-11-07 04:15:01
这可以通过将onMouseDown传递给子div元素来完成。
<RGL ... >
<div> // If you add onMouseDown here react-draggable will override it. You will have to use nested element to capture clicks
<div onMouseDown={ e => e.stopPropagation() }>
...
</div>
<div>
</RGL>发布于 2018-10-15 21:30:06
我设法得到了一个可行的解决方案,通过使用movementx和movementy来查看是否有实际的真实移动。
private onDrag = (
_layout: Layout[],
oldItem: Layout,
_newItem: Layout,
_placeholder: Layout,
e: MouseEvent,
_element: HTMLElement) => {
if (e.movementX !== 0 || e.movementY !== 0) {
this.props.onWidgetDragStart(oldItem.i);
} };onWidgetDragStart触发一个设置变量的事件(redux reducer:)
{
\[actionConstants.DASHBOARD.WIDGET_DRAGGING_STARTED\]: (
state: DraftObject<DashboardsState>,
action: Action<string>,
) => {
state.isWidgetDragging = true;
state.indexOfCurrentDraggedItem = action.payload;
}
}然后单击事件看起来如下所示:
private onTitleClicked = (e: React.MouseEvent<HTMLDivElement>) => {
if (this.props.indexOfCurrentDraggedItem === this.props.options.id) {
e.preventDefault();
this.props.updatingIndexOfCurrentDraggedItem();
return;
}
if (!this.props.isWidgetDragging && !this.state.editMode) {
this.setState({
editMode: true,
});
}
{
\[actionConstants.DASHBOARD.WIDGET_DRAGGING_STARTED\]: (
state: DraftObject<DashboardsState>,
action: Action<string>,
) => {
state.isWidgetDragging = true;
state.indexOfCurrentDraggedItem = action.payload;
},
};其中updatingIndexOfCurrentDraggedItem操作将indexOfCurrentDraggedItem设置为null,并将indexOfCurrentDraggedItem作为道具注入到我的小部件组件。
https://stackoverflow.com/questions/38543470
复制相似问题