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东西


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM