Javascript 如何将html形状拖动到mxgraph画布中

我想将这3个形状拖放到

mxgraph

canvas（黑色区域）中

注意：我想在画布上完全保留拖动元素，包括形状、大小、颜色、文本等

我不知道

insertVertex

是否有效。将橙色、红色或其他框拖动到黑暗区域当前不起作用

var图；
函数initCanvas（）{
//此函数称为onload of body本身，它将使mxgraph成为画布
graph=新的mxGraph（document.getElementById（'graph-wrapper'）；
}
功能手柄（事件）{
event.dataTransfer.setData（“draggedId”，event.target.id）；
}
函数allowDrop（事件）{
event.preventDefault（）；
}
函数handleDrop（事件）{
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；
试一试{
插入顶点（父、空、元素、targetX、targetY）；
}最后{
//更新显示
graph.getModel（）.endUpdate（）；
}
}

#图形包装器{
背景：#333；
宽度：100%；
高度：528px；
}

mxGraph的工具栏示例
mxBasePath=https://jgraph.github.io/mxgraph/javascript/src';
将框拖到黑色画布上，然后查看发生了什么
管
团队
信息

这项工作：

onDragOver函数（事件）{
event.preventDefault（）；
}
功能启动（事件）{
事件
.数据传输
.setData（'text/plain'，event.target.id）；
事件
.当前目标
风格
.backgroundColor='黄色'；
}
onDrop功能（事件）{
常量id=事件
.数据传输
.getData（“文本”）；
const draggableElement=document.getElementById（id）；
const dropzone=event.target；
appendChild（draggableElement）；
事件
.数据传输
.clearData（）；
}
var canvas=document.getElementById（“myCanvas-1”）；
var ctx=canvas.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.fillText（“团队”，60,60）；
var canvas=document.getElementById（“myCanvas-2”）；
var ctx=canvas.getContext（“2d”）；
ctx.font=“30px Arial”；
ctx.fillText（“管道”，70,60）
。示例父级{
边框：2px实心#DFA612；
颜色：黑色；
显示器：flex；
字体系列：无衬线；
字体大小：粗体；
}
.来源示例{
弹性基准：100%；
柔性生长：1；
填充：10px；
}
.可拖动的示例{
背景色：白色；
字体大小：正常；
边缘底部：10px；
边缘顶部：10px；
填充：10px；
}
.示例dropzone{
背景色：暗灰色；
弹性基准：100%；
柔性生长：1；
填充：10px；
}

滴
在mxgraph中，通常使用所谓的“模具”来完成。您可以使用XML定义自己的自定义形状，然后使用mxgraph处理其余部分。RTFM:）

如果你不想遵循这条基线路径，那么事情将变得越来越困难。无论如何，回到正题——您可以使用这个示例（这是您可以在mxgraph中找到的“侧栏”代码的一个采用版本）——有关函数的详细信息，请参阅sidebar.js：


var图；
函数initCanvas（）{
//此函数称为onload of body本身，它将使mxgraph成为画布
graph=新的mxGraph（document.getElementById（'graph-wrapper'）；
graph.htmlLabels=true；
graph.cellsEditable=false；
//始终呈现为HTML节点。但在现实世界中，您可能不希望这样
graph.convertValueToString=函数（单元格）{
返回单元格值；
}
const createDropHandler=函数（单元格，allowSplit）{
返回函数（图形、evt、目标、x、y）{
常量选择=图形导入单元格（单元格、x、y、目标）；
图表.设置选择单元（选择）；
};
};
const createDragPreview=函数（宽度、高度）{
var elt=document.createElement（'div'）；
elt.style.border='1px黑色虚线'；
elt.style.width=宽度+px；
elt.style.height=高度+px；
返回英语教学；
};
const createDragSource=函数（elt、dropHandler、预览）{
返回mxUtils.makeDraggable（elt、graph、dropHandler、preview、0、graph.autoscroll、true、true）；
};
const createItem=（id）=>{
const elt=document.getElementById（id）；
常量宽度=elt.clientWidth；
常数高度=elt.clientHeight；
常量单元格=新的mxCell（“”，新的mxGeometry（0，0，宽度，高度），'fillColor=none；strokeColor=none'）；
cell.vertex=true；
图.模型.设定值（单元格，elt）；
常量单元格=[单元格]；
常量边界=新的MX矩形（0，0，宽度，高度）；
createDragSource（elt、createDropHandler（单元格、真、假、边界）、createDragPreview（宽度、高度）、单元格、边界）；
};
createItem（“形状1”）；
createItem（“shape_2”）；
createItem（“shape_3”）；
}

mxGraph的工具栏示例
#图形包装器{
背景：#333；
宽度：100%；
高度：528px；
}
mxBasePath=https://jgraph.github.io/mxgraph/javascript/src';
将框拖到黑色画布上，然后查看发生了什么
管
团队
信息
我希望它可以拖动到黑色的
画布上，这是
mxgraph
画布。我想说的是这样的话，请检查我的更新代码，现在可以拖放元素，但形状不正确。请帮我提前谢谢！！！我不熟悉mxgraph。也许拖放的示例代码将有助于y