8000 fix: drag node parent and dragEnd initData · Create-Peace/light-vue-tree@6e2433d · GitHub
[go: up one dir, main page]
Skip to content

Commit 6e2433d

Browse files
Create-PeaceCreate-Peace
committed
fix: drag node parent and dragEnd initData
1 parent be4f1da commit 6e2433d

File tree

4 files changed

+30
-30
lines changed

4 files changed

+30
-30
lines changed

‎src/App.vue

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,5 +206,20 @@ export default {
206206
height: 1px;
207207
background-color: #409eff;
208208
}
209-
209+
210+
211+
212+
.tree {
213+
position: relative;
214+
.tree-node {
215+
padding: 4px 0;
216+
.tree-node-name {
217+
display: inline-block;
218+
}
219+
}
220+
.is-drop-inner > .tree-node-content > .tree-node-name {
221+
background-color: #409eff;
222+
color: #fff;
223+
}
224+
}
210225
</style>

‎src/components/Tree.js

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -85,19 +85,6 @@ export default {
8585
},
8686
methods: {
8787
initData(root = this.root) {
88-
// const { children = [] } = root;
89-
/*children?.forEach((child) => {
90-
const { data } = child;
91-
// TODO 保存选中的值
92-
this.getCheckedValue(child)
93-
if (data.selected && !this.checkStrictly) {
94-
// this.refreshUp(child);
95-
96-
this.refreshDown(child);
97-
} else {
98-
this.initData(child);
99-
}
100-
});*/
10188
const selectedNodes = []
10289
this.recurTree(root, selectedNodes)
10390
selectedNodes.forEach((node) => {
@@ -175,7 +162,6 @@ export default {
175162
event.stopPropagation()
176163
},
177164
dragStart(event, treeNode) {
178-
console.log('dratstart')
179165
event.stopPropagation()
180166
if (
181167
typeof this.allowDrag === "function" &&
@@ -195,7 +181,6 @@ export default {
195181
console.error(e);
196182
}
197183
this.dragInfo.draggingNode = treeNode;
198-
console.log('this.dragInfo.draggingNode', this.dragInfo.draggingNode)
199184
this.$emit("node-drag-start", treeNode.node, event);
200185
},
201186
dragOver(event) {
@@ -238,15 +223,12 @@ export default {
238223
if (dropPrev || dropInner || dropNext) {
239224
dragInfo.dropNode = dropNode;
240225
}
241-
// console.log('dropNode', dropNode)
242-
// TODO 这里的逻辑需要实现
243226
if (dropNode.node.nextSibling === draggingNode.node) {
244227
dropNext = false;
245228
}
246229
if (dropNode.node.previousSibling === draggingNode.node) {
247230
dropPrev = false;
248231
}
249-
// TODO contains 需要实现
250232
if (dropNode.node.contains(draggingNode.node, false)) {
251233
dropInner = false;
252234
}
@@ -280,6 +262,8 @@ export default {
280262

281263
let indicatorTop = -9999;
282264
const distance = event.clientY - targetPosition.top;
265+
266+
console.log('distance', distance)
283267
if (distance < targetPosition.height * prevPercent) {
284268
dropType = "before";
285269
} else if (distance > targetPosition.height * nextPercent) {
@@ -322,7 +306,8 @@ export default {
322306
event.dataTransfer.dropEffect = "move";
323307

324308
if (draggingNode && dropNode) {
325-
const draggingNodeCopy = { data: draggingNode.node.data };
309+
// const draggingNodeCopy = { data: draggingNode.node.data };node
310+
const draggingNodeCopy = draggingNode.node
326311
if (dropType !== "none") {
327312
draggingNode.node.remove();
328313
}
@@ -333,9 +318,6 @@ export default {
333318
} else if (dropType === "inner") {
334319
dropNode.node.insertChild(draggingNodeCopy);
335320
}
336-
// if (dropType !== "none") {
337-
// this.store.registerNode(draggingNodeCopy);
338-
// }
339321

340322
removeClass(dropNode.$el, "is-drop-inner");
341323

@@ -355,6 +337,7 @@ export default {
355337
event
356338
);
357339
}
340+
this.initData()
358341
}
359342
if (draggingNode && !dropNode) {
360343
this.$emit("node-drag-end", draggingNode.node, null, dropType, event);
@@ -365,10 +348,11 @@ export default {
365348
dragInfo.dropNode = null;
366349
dragInfo.allowDrop = true;
367350
},
351+
368352
},
369353
render() {
370354
return (
371-
<div style="text-align: left">
355+
<div class="tree" style="text-align: left">
372356
{/* {this.getView(this.root, 0)} */}
373357
{this.root?.children?.map((node, index) => {
374358
return <TreeNode key={node?.data?.name ?? index} node={node} />;

‎src/components/TreeData.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export default class TreeData {
105105
}
106106

107107
insertChild(child, index) {
108-
108+
child.parent = this
109109
if (typeof index === 'undefined' || index < 0) {
110110
this.children.push(child);
111111
} else {

‎src/components/TreeNode.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,13 @@ export default {
5353
const { renderTreeNode< FD43 span class=pl-kos>, $scopedSlots: { default: defaultSlot } } = this.tree
5454

5555
return (name && <div
56-
style={`margin-left: ${level * 10}px; margin-bottom: 6px; display: inline-block;`}
56+
class="tree-node-content"
57+
style={`margin-left: ${level * 10}px; display: inline-block;`}
5758
>
5859
{<span class={['icon', 'sh__expand-icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => this.foldToggle(node)} style={{padding: 1, background: '#eee', cursor: 'pointer', visibility: node.children && node.children.length ? 'visible' : 'hidden'}}>▲</span>}
5960
{ partialSelected && `-`}
6061
{this.tree.showCheckbox && <input type='checkbox' disabled={disabled} checked={selected} onClick={() => this.selectToggle(node)} />}
61-
{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }
62+
<div class='tree-node-name'>{ renderTreeNode ? renderTreeNode(node) : defaultSlot? defaultSlot({node}): <span>{name}</span> }</div>
6263
</div>)
6364
},
6465
foldToggle(node) {
@@ -77,13 +78,13 @@ export default {
7778
const { node, level } = this
7879
const currentNode = this.nodeView(node, level)
7980
const { draggable, dragStart, dragOver, dragEnd, handleDrop} = this.tree
80-
// console.log(dragStart)
8181

8282
return (<div
83+
class="tree-node"
8384
draggable={draggable}
8485
onDragstart={(e) => dragStart(e, this)}
85-
onDragover={(e) => dragOver(e, this)}
86-
onDragend={(e) => dragEnd(e, this)}
86+
onDragover={(e) => dragOver(e)}
87+
onDragend={(e) => dragEnd(e)}
8788
onDrop={handleDrop}
8889
>
8990
{currentNode}

0 commit comments

Comments
 (0)
0