javascript - 拖放适用于 IE 和边缘，但不适用于 chrome 或 firefox

Question

我有一个反应项目。我对 react 项目中的某些组件进行了拖放。当我在 Internet Explorer 或 Edge 中打开它时，将小部件从侧边栏拖动到主仪表板会在光标旁边显示灰色框图标，这意味着正在仪表板上传输的数据将基于从工具栏拖动的小部件创建一个小部件面板.

当我尝试在 Chrome 和 Firefox 中执行此操作时，当我开始从工具栏中拖动一个小部件时，我得到一个黑色的带线的圆圈。有谁知道为什么在 chome 和 firefox 上会发生这种情况。

这是不工作的部分....

仪表板：

export const WidgetDashboard: React.FC<PropsBase> = (props) => {
    const { className } = props;

    const themeClass = useBehavior(mainStore.themeClass);

    const isLoading = useBehavior(dashboardStore.isLoading);
    const dashboard = useBehavior(dashboardStore.currentDashboard);
    const { tree, panels } = useBehavior(dashboard.state);

    const setLayout = useCallback((currentNode: DashboardNode | null) => dashboardService.setLayout(currentNode), []);

    if (isLoading) {
        return <Spinner className={styles.loadingSpinner} />;
    }

    let dragStart = (e) => {
        // this is initiated whenthe drag starts.
        console.log(e.target.id)
        console.log('drag start')
        e.dataTransfer.setData("text", e.target.id)
    }

    let endDrag = (e) => {
        // the following is activated when the drag is ended
        console.log('ended drag')
    }

    let onDragOver = (e) => {
        e.preventDefault()
        let widgetId = e.dataTransfer.getData("text");
        let userWidget = dashboardStore.userDashboards().value.widgets[widgetId];
        dashboardService.setLayout(userWidget)
    }

    let drop = (e) => {
        let widgetId = e.dataTransfer.getData("text");
        let userWidget = dashboardStore.userDashboards().value.widgets[widgetId];
        dashboardService.addWidget(userWidget);
    }

    return (
        <div className={classNames(styles.dashboard, className)} id="dashboard-window" draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart} onDrop={drop} onDragEnd={endDrag}>
            <DashboardLayout
                className={classNames("mosaic-blueprint-theme", "mosaic", "mosaic-drop-target", themeClass)}
                value={tree}
                onChange={setLayout}
                renderTile={(id: string, path: DashboardPath) => <DashboardPanel panel={panels[id]} path={path} 
                />}
            />
        </div>
    );
};

** 在仪表板上未正确触发的是 drop 功能和 drag end 功能。

这是我正在拖动的小部件磁贴：

export const UserWidgetTile: React.FC<WidgetProps> = ({ userWidget, dashboardService}) => {

    let dragStart = (e) => {
        // this is initiated whenthe drag starts.
        console.log(e.target.id)
        console.log('drag start')
        e.dataTransfer.setData("text", e.target.id)
        setTimeout(() => {
            mainStore.closeWidgetToolbar()
        }, 500)
    }

    return (
        <div className={styles.tile} id={userWidget.id} onClick={() => dashboardService.addWidget(userWidget)}>
            <img className={styles.tileIcon} id={userWidget.id} src={userWidget.widget.images.smallUrl} draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart}/>
            <span className={styles.tileTitle} id={userWidget.id} draggable={true} onDragOver={(e) => e.preventDefault()} onDragStart={dragStart} >{userWidget.widget.title}</span>
        </div>
    );

};

标签： javascriptreactjsgoogle-chromeinternet-explorerdrag-and-drop