MxGraph - 拖动源时突出显示某些单元格答案

【问题标题】：MxGraph - hightlight some cells when dragging sourceMxGraph - 拖动源时突出显示某些单元格
【发布时间】：2019-04-29 08:36:14
【问题描述】：

我在我的 React 应用程序中集成了 mxGraph。现在我想在从编辑器的侧边栏中拖动组件时突出显示一些单元格。此突出显示的单元格应指示可以删除此源的位置。

有一个功能，它应该为我提供获取放置目标的可能性，它应该自动突出显示。但是这个函数根本不起作用，也永远不会被调用。

makeDraggable: function(element, graphF, funct, dragElement, dx, dy, autoscroll, scalePreview, highlightDropTargets, getDropTarget)

还有其他选择吗？收听此拖动源或类似的“开始移动”事件？

我的应用程序或多或少类似于以下示例： https://codesandbox.io/s/vny2qo6lry

【问题讨论】：

标签： javascript drag-and-drop mxgraph

【解决方案1】：

对于拖动已经在绘图上的单元格，您可以覆盖 isValidDropTarget：

mxGraph.prototype.isValidDropTarget = function (target, cells, evt) {
    return target._type == 'phase' && cells.every(c => c._type != 'phase');
};

对于从工具栏中拖动新单元格（dragSource），您可以覆盖 getDropTarget：

mxDragSource.prototype.getDropTarget = function (graph, x, y) {
    let cell = graph.getCellAt(x, y);
    return cell && cell._type == 'phase' ? cell : null;
};

在我的示例中，我实现了一个自定义 _type 属性来满足我们的业务需求，但基线是您验证单元格。

【讨论】：

【解决方案2】：

 mxDragSource.prototype.getDropTarget = function (graph, x, y) {
            var cell = graph.getCellAt(x, y);
            return cell;
        };

这个单元格可以用作你的函数“funct”中的目标单元格，通过这样做，你的单元格下面的单元格将被突出显示希望这有帮助

【讨论】：