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>
    );
};

**正是拖放功能和拖动结束功能未在仪表板上正确触发。

这是我正在拖动的小部件图块：

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>
    );

};

拖放适用于IE和Edge，但不适用于chrome或Firefox

0 个答案: