关于页面拖拽

Question

1. 公司的组织结构是树形的，如下图

一般来说我们可能会用树形的插件 比如 zTree 来显示。
那么展示效果是下图的样子（请忽略内容无关性）：

但是需求是这样的：

模板是一个可复制拖动的（点击拖动的时候是要复制一个的，然后拖动的是复制的那个而不是本身），可以拖动到1 ，2， 3 等位置，当只有一个模板的时候，那么可以拖动到1，这个时候并不会有别的任何东西，但如果我想在1下加一个比如2，那么我再拖动（复制的那个）模板，放到2的位置，我要他自动的和1（父节点）去连线，表示 父-子 关系。3，4 同理。 如果要在 2 下加子节点，那么拖动模板（复制的那个） 放到2的下面，自动和 2 去连线。 如果要编辑内容的话，那么单击一下任意节点，在弹框中修改信息。
不知道大家明白意思没有？

本来是找了几个拖拽插件看看的，比如 gridstack draggabilly，可是都不符合需求，最主要的是他们是jquery插件，操作的都是dom节点，那个线条没法画出来。
后来看了下canvas 看教程说不支持事件（后台人员，前端弱弱的，所以要去看看教程才知道），这样的话就无法捕获单击事件，然后弹框去编辑信息了。 而且 canvas svg貌似都无法拖拽吧。
还有个，就是这次编辑完了之后保存，关闭页面，下次再打开的时候要能还原之前的样子，大概就这些了。
关于这样的需求 大家有什么建议吗？谢谢?

Answer 1

忧桑的故事，自问自答

yfiles
qunee（商业）
kityMinder（百度脑图）

canvas svg 都可以实现，更多的看书看资料吧