Function makeDraggable

Configures the given DOM element to act as a drag source for the specified graph. Returns a a new DragSource. If DragSource#guideEnabled is enabled then the x and y arguments must be used in funct to match the preview location.

Example:

let funct = (graph, evt, cell, x, y)=>
{
  if (graph.canImportCell(cell))
  {
    let parent = graph.getDefaultParent();
    let vertex = null;

    graph.getDataModel().beginUpdate();
    try
    {
       vertex = graph.insertVertex(parent, null, 'Hello', x, y, 80, 30);
    }
    finally
    {
      graph.getDataModel().endUpdate();
    }

    graph.setSelectionCell(vertex);
  }
}

let img = document.createElement('img');
img.setAttribute('src', 'editors/images/rectangle.gif');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
img.style.width = '16px';
img.style.height = '16px';

let dragImage = img.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
mxUtils.makeDraggable(img, graph, funct, dragImage);
document.body.appendChild(img);
  • makeDraggable(element, graphF, funct, dragElement?, dx?, dy?, autoscroll?, scalePreview?, highlightDropTargets?, getDropTarget?): DragSource

  • Parameters

    • element: Element

      DOM element to make draggable.

    • graphF: Function | Graph

      Graph that acts as the drop target or a function that takes a mouse event and returns the current Graph.

    • funct: DropHandler

      Function to execute on a successful drop.

    • dragElement: null | Element = null

      Optional DOM node to be used for the drag preview.

    • dx: null | number = null

      Optional horizontal offset between the cursor and the drag preview.

    • dy: null | number = null

      Optional vertical offset between the cursor and the drag preview.

    • autoscroll: null | boolean = null

      Optional boolean that specifies if autoscroll should be used. Default is mxGraph.autoscroll.

    • scalePreview: boolean = false

      Optional boolean that specifies if the preview element should be scaled according to the graph scale. If this is true, then the offsets will also be scaled. Default is false.

    • highlightDropTargets: boolean = true

      Optional boolean that specifies if dropTargets should be highlighted. Default is true.

    • getDropTarget: null | ((graph: Graph, x: number, y: number, evt: MouseEvent) => Cell) = null

      Optional function to return the drop target for a given location (x, y). Default is mxGraph.getCellAt.

    Returns DragSource

Settings

Member Visibility