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