Question

是否可以捕获网格项的单击并取消拖动事件？我想在单击网格项时打开模态窗口，但我无法弄清楚如何实现它。我正在使用onClick捕获点击，但stopPropagation和preventDefault不会阻止开始拖动过程的mousedown事件。

Answer 1

这可以通过将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>

Answer 2

通过使用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作为道具注入到我的小部件组件中。

在react-grid-layout中捕获网格项单击事件

2 个答案: