element目录树的拖拽功能----->

如果你用到拖拽,那么我猜你用到了svg.那么你对d3一定有一定的了解了.

总之我猜你一定是有基础的人.同时也为自己记录下,目录树的巨型Bug

:allow-drop="allowDrop",这个配置他是可以使你的拖拽恢复原来.超级有用的东东

:render-content="renderContent"

大家看下面的代码是jsx语法,没错这个可以使你灵活的添加图标什么的.

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) { // 拖拽结束

// 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))) // 从左侧树中拖出数据放到右侧

},

里面有svg东西