Question

我已经在我的React应用程序中集成了mxGraph。现在，我想在从编辑器的侧边栏拖动组件时突出显示一些单元格。突出显示的单元格应指示可以将该源放置在何处。

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

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

还有另一种选择-例如收听此拖动源或类似事件的“开始移动”事件？

我的应用程序与以下示例大致相似： https://codesandbox.io/s/vny2qo6lry

Answer 1

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

通过执行此操作，此单元格可以用作函数“ funct”中的目标单元格，将突出显示该单元格下方的单元格，希望对您有所帮助

Answer 2

要拖动图形中已存在的单元格，可以覆盖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 属性以符合我们的业务需求，但是基线是您验证单元格。

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

2 个答案: