mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tree: update drag and drop logic (#10372)

Browse Source
This commit is contained in:
FuryBean
2018-03-28 11:46:48 +08:00
committed by 杨奕
parent 438348c33b
commit 4fe58a3d96
9 changed files with 505 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
packages/tree/src/tree-node.vue
View File

@@ -18,8 +18,6 @@
:aria-checked="node.checked"
:draggable="tree.draggable"
@dragstart.stop="handleDragStart"
@dragenter.stop="handleDragEnter"
@dragleave.stop="handleDragLeave"
@dragover.stop="handleDragOver"
@dragend.stop="handleDragEnd"
@drop.stop="handleDrop"
@@ -114,7 +112,7 @@
? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
: tree.$scopedSlots.default
? tree.$scopedSlots.default({ node, data })
: <span class="el-tree-node__label">{ this.node.label }</span>
: <span class="el-tree-node__label">{ node.label }</span>
);
}
}
@@ -209,90 +207,21 @@
this.tree.$emit('node-expand', nodeData, node, instance);
},
handleDragStart(ev) {
if (typeof this.tree.allowDrag === 'function' && !this.tree.allowDrag(this.node)) {
ev.preventDefault();
return false;
}
ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData('text/plain', this.node.label);
this.node.store.dragSourceNode = this.node;
this.node.store.dragFromDom = this.$refs.node;
this.node.store.allowDrop = true;
this.tree.$emit('node-drag-start', this.node, ev);
handleDragStart(event) {
this.tree.$emit('tree-node-drag-start', event, this);
},
handleDragEnter(ev) {
ev.preventDefault();
const store = this.node.store;
const from = store.dragSourceNode;
let node = this.node;
let dom = this.$refs.node;
if (!from) return;
while (node.level > from.level && node.level > 1) {
node = node.parent
dom = this.$parent.$refs.node;
}
store.dragTargetNode = node;
store.dragTargetDom = dom;
if (!this.tree.dropAt) {
ev.dataTransfer.dropEffect = 'none';
store.allowDrop = false;
} else {
ev.dataTransfer.dropEffect = 'move';
store.allowDrop = true;
}
this.tree.$emit('node-drag-enter', this.node, ev);
handleDragOver(event) {
this.tree.$emit('tree-node-drag-over', event, this);
event.preventDefault();
},
handleDragLeave(ev) {
ev.preventDefault();
if (!this.node.store.dragSourceNode) return;
this.tree.$emit('node-drag-leave', this.node, ev);
handleDrop(event) {
event.preventDefault();
},
handleDragOver(ev) {
ev.dataTransfer.dropEffect = this.node.store.allowDrop ? 'move' : 'none';
ev.preventDefault();
},
handleDrop(ev) {
ev.preventDefault();
},
handleDragEnd(ev) {
const from = this.node.store.dragSourceNode;
const target = this.node.store.dragTargetNode;
let position = this.tree.dropAt;
if (!from) return;
if (typeof this.tree.allowDrop === 'function' && !this.tree.allowDrop(from, target)) {
position = null;
}
ev.preventDefault();
ev.dataTransfer.dropEffect = 'move';
if (target && from && from !== target && position) {
const index = from.parent.childNodes.indexOf(from);
from.parent.childNodes.splice(index, 1);
if (from.parent.childNodes.length === 0) {
from.parent.isLeaf = true;
}
position.parent.childNodes.splice(position.index, 0, from);
from.parent = position.parent;
from.parent.isLeaf = false;
}
this.tree.$emit('node-drag-end', from, target, position, ev);
this.node.store.dragTargetNode = null;
this.node.store.dragSourceNode = null;
this.node.store.dragTargetDom = null;
return false;
handleDragEnd(event) {
this.tree.$emit('tree-node-drag-end', event, this);
}
},