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.
JavaScript
x
34
34
1
var graph;2
3
function initCanvas() {4
//This function is called onload of body itself and it will make the mxgraph canvas5
graph = new mxGraph(document.getElementById('graph-wrapper'));6
}7
8
9
function handleDrag(event) {10
event.dataTransfer.setData("draggedId", event.target.id);11
}12
13
function allowDrop(event) {14
event.preventDefault();15
}16
17
function handleDrop(event) {18
console.log('dropped');19
event.preventDefault();20
var parent = graph.getDefaultParent();21
graph.getModel().beginUpdate();22
23
var element = document.getElementById(event.dataTransfer.getData('draggedId'))24
var gridRect = document.getElementById('graph-wrapper').getBoundingClientRect();25
var targetX = event.x - gridRect.x;26
var targetY = event.y - gridRect.y;27
28
try {29
graph.insertVertex(parent, null, element, targetX, targetY);30
} finally {31
// Updates the display32
graph.getModel().endUpdate();33
}34
}JavaScript
1
5
1
#graph-wrapper {2
background: #333;3
width: 100%;4
height: 528px;5
}JavaScript
1
38
38
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<!--3
Copyright (c) 2006-2013, JGraph Ltd4
5
Dynamic toolbar example for mxGraph. This example demonstrates changing the6
state of the toolbar at runtime.7
-->8
<html>9
10
<head>11
<title>Toolbar example for mxGraph</title>12
<script type="text/javascript">13
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';14
</script>15
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>16
</head>17
18
<body onload="initCanvas()">19
<h4>Drag Boxes onto the black canvas and see what happens</h4>20
21
22
<div>23
<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>24
<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>25
<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;">26
<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>27
<div>Info</div>28
</div>29
30
</div>31
32
33
34
<div id="graph-wrapper" ondrop='handleDrop(event)' ondragover="allowDrop(event)">35
</div>36
</body>37
38
</html>Advertisement
Answer
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:
JavaScript
1
54
54
1
var graph;2
3
function initCanvas() {4
5
//This function is called onload of body itself and it will make the mxgraph canvas6
graph = new mxGraph(document.getElementById('graph-wrapper'));7
graph.htmlLabels = true;8
graph.cellsEditable = false;9
10
// render as HTML node always. You probably won't want that in real world though11
graph.convertValueToString = function(cell) {12
return cell.value;13
}14
15
const createDropHandler = function (cells, allowSplit) {16
return function (graph, evt, target, x, y) {17
const select = graph.importCells(cells, x, y, target);18
graph.setSelectionCells(select);19
};20
};21
22
const createDragPreview = function (width, height) {23
var elt = document.createElement('div');24
elt.style.border = '1px dashed black';25
elt.style.width = width + 'px';26
elt.style.height = height + 'px';27
return elt;28
};29
30
const createDragSource = function (elt, dropHandler, preview) {31
return mxUtils.makeDraggable(elt, graph, dropHandler, preview, 0, 0, graph.autoscroll, true, true);32
};33
34
const createItem = (id) => {35
36
const elt = document.getElementById(id);37
const width = elt.clientWidth;38
const height = elt.clientHeight;39
40
const cell = new mxCell('', new mxGeometry(0, 0, width, height), 'fillColor=none;strokeColor=none');41
cell.vertex = true;42
graph.model.setValue(cell, elt);43
44
const cells = [cell];45
46
const bounds = new mxRectangle(0, 0, width, height);47
createDragSource(elt, createDropHandler(cells, true, false, bounds), createDragPreview(width, height), cells, bounds);48
};49
50
51
createItem("shape_1");52
createItem("shape_2");53
createItem("shape_3");54
}JavaScript
1
48
48
1
<html>2
3
<head>4
<title>Toolbar example for mxGraph</title>5
<style>6
#graph-wrapper {7
background: #333;8
width: 100%;9
height: 528px;10
}11
</style>12
<script type="text/javascript">13
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';14
</script>15
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>16
<script src="./app.js"></script>17
</head>18
19
<body onload="initCanvas()">20
<h4>Drag Boxes onto the black canvas and see what happens</h4>21
22
<div>23
<div id="shape_1"24
style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">25
Pipe26
</div>27
28
<div draggable="true" id="shape_2"29
style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">30
Team31
</div>32
33
<div draggable="true" id="shape_3"34
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;">35
<div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">36
<path d="M0 0h24v24H0V0z" fill="none" />37
<path38
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" />39
</svg></div>40
<div>Info</div>41
</div>42
</div>43
44
<div id="graph-wrapper">45
</div>46
</body>47
48
</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.