element tree drag and drop ----->

As if you use the drag and drop, then I guess you use the svg. Then you must have some knowledge of the d3.

Anyway, I guess you must have a foundation of people. But also for their next record, the giant tree Bug

: Allow-drop = "allowDrop", this configuration is that he allows you to drag and drop restore the original super useful stuff.
:render-content="renderContent"
We look at the following code jsx grammar, yes this can make you the flexibility to add icons or something.
renderContent(h, { node, data, store }) {
if (node.childNodes.length > 0 && node.childNodes.length) {
return <span class='custom-tree-node' draggable={false}>{node.label}</span>
} else {
if (node.label) {
return <span style='font-size:12px'><i class='iconfont icon-wenjian' style='padding-right:5px;' />{node.label}</span>
}
}
},
@node-drag-end="handleDragEnd"
handleDragEnd (node, dropNode, dropType, ev) {// trailing end
// console.log(node, dropNode, dropType, ev)
node.data.x = ev.clientX - dagcLeftWidth
node.data.y = ev.clientY - dagcTopHeight
for (var k in node.data) {
if (k == 'id') {
delete node.data[k]
}
}
this.addComponents (JSON.parse (JSON.stringify (node.data))) // data pulled from the left side into the right side of the tree
},
There are things svg

Guess you like

Origin www.cnblogs.com/MDGE/p/11226993.html