1

我正在尝试实现 html Drag and Drop，这是我过去在同一个项目及其工作中所做的。但是当我为我正在做的一个新部分创建它时，我当前的方法只适用于 Firefox。所有其他浏览器立即调用onDragEnd. onDragStart这是元素：

const Card: FunctionComponent<CardsProps> = ({
  isDraggingTag,
  draggingTagId,
  isDraggingCard,

  onOpen,
  onDrag,
  onDrop,
  onDragEnd
}) => {
  // State
  const ref = useRef<HTMLElement>();

  // region handlers

  const handleOnOpen = (): void => {
    onOpen && onOpen(props.id);
  };

  const handleOnDrag = (event: DragEvent<HTMLElement>): void => {
    console.log("start");
    onDrag && onDrag(props.id);
  };

  const handleOnDragEnd = (): void => {
    console.log("end");
    onDragEnd && onDragEnd();
  };

  const handleOnDrop = (): void => {
    console.log("drop");
    onDrop && onDrop(props.id);
  };

  // endregion

  // region render

  return (
    <Paper
      ref={selectableRef}
      draggable
      onClick={handleOnOpen}
      onDragStart={handleOnDrag}
      onDragEnd={handleOnDragEnd}
      onDrop={handleOnDrop}
    >
        ...
    </Paper>
  );

  // endregion render
};

export default withStyles(styles)(createSelectable(memo(Card)));

何时handleOnDrag在除 firefox 之外的任何东西上调用，其中onDrag定义了 prop 并立即触发结果onDragEnd。onDrag这个方法是在 Redux 视图容器上吗

handleCardDrag = (cardId: string): void => {
    const { display, selection, eventsActionSetDragAndDrop } = this.props;

    if (
      !display?.cards ||
      !eventsActionSetDragAndDrop
    ) {
      return;
    }

    const card = display.cards.get(cardId);

    if (!card) {
      return;
    }

    // Redux action call
    eventsActionSetDragAndDrop({
      sourceType: selection?.selectedStream
        ? MyDataCardTypes.Record
        : MyDataCardTypes.Stream,
      sourceId: cardId
    });
  };

我不确定为什么这会导致拖放立即结束。我已经尝试过使用，preventDefault但stopPropagation只是导致onDragEnd从未被解雇。

4

0 回答 0