How to drag html shapes into mxgraph canvas

Question

I want to drag and drop those 3 shapes into mxgraph canvas (which is the black area).

Note: I want to fully preserve the drag element on the canvas, including shape, size, color, text, etc.

I don't know whether insertVertex does it work. Dragging the orange,red or other box in to the dark area currently does not work.

var graph;

function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
  graph = new mxGraph(document.getElementById('graph-wrapper'));
}


function handleDrag(event) {
  event.dataTransfer.setData("draggedId", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function handleDrop(event) {
  console.log('dropped');
  event.preventDefault();
  var parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();

  var element = document.getElementById(event.dataTransfer.getData('draggedId'))
  var gridRect = document.getElementById('graph-wrapper').getBoundingClientRect();
  var targetX = event.x - gridRect.x;
  var targetY = event.y - gridRect.y;

  try {
    graph.insertVertex(parent, null, element, targetX, targetY);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }
}

#graph-wrapper {
  background: #333;
  width: 100%;
  height: 528px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Dynamic toolbar example for mxGraph. This example demonstrates changing the
  state of the toolbar at runtime.
-->
<html>

<head>
  <title>Toolbar example for mxGraph</title>
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
  </script>
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
</head>

<body onload="initCanvas()">
  <h4>Drag Boxes onto the black canvas and see what happens</h4>
 
  
  <div>
    <div draggable="true" id="shape_1"  ondragstart="handleDrag(event)" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">Pipe</div>
    <div draggable="true" id="shape_2"  ondragstart="handleDrag(event)" style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">Team</div>
    <div draggable="true" id="shape_3"  ondragstart="handleDrag(event)" style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
        <div>  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg></div>
        <div>Info</div>
    </div>
    
  </div>
  
 

  <div id="graph-wrapper" ondrop='handleDrop(event)' ondragover="allowDrop(event)">
  </div>
</body>

</html>

please check my updated code, now able to drag and drop element but shape is not coming properly. please help me thanks in advance!!! — EaBengaluru, Jun 03 '21 at 04:56

Nikolay · Accepted Answer · 2021-06-15T11:32:19.780

In mxgraph, normally you do that using so-called "stencil". You can define your own custom shapes using XML, and then use mxgraph to take care of the rest. RTFM :)

If you don't want to follow this baseline path, then things will become increasingly harder. Anyway, back to the point - you can use this example (it's an adopted version of the "sidebar" code you can find in the mxgraph) - for the details on functions see the Sidebar.js:

var graph;

function initCanvas() {

  //This function is called onload of body itself and it will make the mxgraph canvas
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  graph.htmlLabels = true;
  graph.cellsEditable = false;

  // render as HTML node always. You probably won't want that in real world though
  graph.convertValueToString = function(cell) {
    return cell.value;
  }

  const createDropHandler = function (cells, allowSplit) {
    return function (graph, evt, target, x, y) {
      const select = graph.importCells(cells, x, y, target);
      graph.setSelectionCells(select);
    };
  };

  const createDragPreview = function (width, height) {
    var elt = document.createElement('div');
    elt.style.border = '1px dashed black';
    elt.style.width = width + 'px';
    elt.style.height = height + 'px';
    return elt;
  };

  const createDragSource = function (elt, dropHandler, preview) {
    return mxUtils.makeDraggable(elt, graph, dropHandler, preview, 0, 0, graph.autoscroll, true, true);
  };

  const createItem = (id) => {

    const elt = document.getElementById(id);
    const width = elt.clientWidth;
    const height = elt.clientHeight;

    const cell = new mxCell('', new mxGeometry(0, 0, width, height), 'fillColor=none;strokeColor=none');
    cell.vertex = true;
    graph.model.setValue(cell, elt);

    const cells = [cell];

    const bounds = new mxRectangle(0, 0, width, height);
    createDragSource(elt, createDropHandler(cells, true, false, bounds), createDragPreview(width, height), cells, bounds);
  };


  createItem("shape_1");
  createItem("shape_2");
  createItem("shape_3");
}

<html>

<head>
    <title>Toolbar example for mxGraph</title>
    <style>
        #graph-wrapper {
            background: #333;
            width: 100%;
            height: 528px;
        }
    </style>
    <script type="text/javascript">
        mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    </script>
    <script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
    <script src="./app.js"></script>
</head>

<body onload="initCanvas()">
    <h4>Drag Boxes onto the black canvas and see what happens</h4>

    <div>
        <div id="shape_1"
            style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Pipe
        </div>

        <div draggable="true" id="shape_2"
            style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Team
        </div>
        
        <div draggable="true" id="shape_3"
            style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
            <div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                    <path d="M0 0h24v24H0V0z" fill="none" />
                    <path
                        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                </svg></div>
            <div>Info</div>
        </div>
    </div>

    <div id="graph-wrapper">
    </div>
</body>

</html>

Note that your code, and the other answer focuses on generic drag-n-drop, which is not applicable to mxgraph. You need to use library-specific code.

thanks for the great answer, today only i have seen your answer bounty grace period also expired. on doublick of the box on canvas it is showing some junk html content, can you please update/fix that — EaBengaluru, Jun 15 '21 at 05:25
I have added a line to disable editing: grap.cellsEditable = false ") — Nikolay, Jun 15 '21 at 11:31
Thanks a lot i regret that i was not able to reward bounty(in grace period) to your answer — EaBengaluru, Jun 15 '21 at 12:13
don't sweat it :D I was working with mxgraph for the past few months, so kind of had to look for in-s and out-s — Nikolay, Jun 15 '21 at 13:25

Bernhard Beatus · Answer 2 · 2021-06-02T16:26:11.323

This works:

function onDragOver(event) {
  event.preventDefault();
}

function onDragStart(event) {
  event
    .dataTransfer
    .setData('text/plain', event.target.id);

  event
    .currentTarget
    .style
    .backgroundColor = 'yellow';
}

function onDrop(event) {
  const id = event
    .dataTransfer
    .getData('text');

  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);

  event
    .dataTransfer
    .clearData();
}

var canvas = document.getElementById("myCanvas-1");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Team", 60, 60);

var canvas = document.getElementById("myCanvas-2");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Pipe", 70, 60);

.example-parent {
  border: 2px solid #DFA612;
  color: black;
  display: flex;
  font-family: sans-serif;
  font-weight: bold;
}

.example-origin {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

.example-draggable {
  background-color: white;
  font-weight: normal;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px;
}

.example-dropzone {
  background-color: darkgrey;
  flex-basis: 100%;
  flex-grow: 1;
  padding: 10px;
}

<div class="example-parent">
  <div class="example-origin">
    <div id="draggable-1" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
      <canvas id="myCanvas-1" width="200" height="100" style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
      </canvas>
    </div>
    <div id="draggable-2" class="example-draggable" draggable="true" ondragstart="onDragStart(event);">
      <canvas id="myCanvas-2" width="200" height="100" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
      </canvas>
    </div>
    <div class="example-dropzone" ondragover="onDragOver(event);" ondrop="onDrop(event);">Drop
    </div>
  </div>
</div>

See this tutorial: https://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js-de

i want it to be draggable on the black `canvas` which is `mxgraph` canvas i meant to say something like this https://jgraph.github.io/mxgraph/javascript/examples/dragsource.html — EaBengaluru, Jun 03 '21 at 04:29
please check my updated code, now able to drag and drop element but shape is not coming properly. please help me thanks in advance!!! — EaBengaluru, Jun 03 '21 at 04:57
I'm not familiar with mxgraph. Maybe the example code for drag and drop will help you: https://github.com/jgraph/mxgraph-js/blob/master/javascript/examples/drop.html — Bernhard Beatus, Jun 03 '21 at 07:31
ok, though your help is much appriciated, but that is only for image — EaBengaluru, Jun 03 '21 at 07:42
Maybe this example could help you. There is a drag and a drop field. I downloaded it and try it. https://github.com/jgraph/mxgraph-js/blob/master/javascript/examples/dragsource.html You can use this as a basic script. I think you don't need any html. Everything will be created inside mxgraph what I found out. — Bernhard Beatus, Jun 03 '21 at 08:22
This is unrelated to mxgraph though.. Have you seen the [mxgraph] tag?? — Nikolay, Jun 12 '21 at 12:01

How to drag html shapes into mxgraph canvas

2 Answers2