Skip to content

E
Element
Commit 4fe58a3d authored by FuryBean's avatar FuryBean Committed by 杨奕
Browse files
Options

Tree: update drag and drop logic (#10372)

parent 438348c3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 505 additions and 161 deletions
examples/docs/en-US/tree.md
View file @ 4fe58a3d
......@@ -996,6 +996,103 @@ Only one node among the same level can be expanded at one time.
```
:::
### Draggable
Tree nodes can be drag and drop.
:::demo
```html
<el-tree
:data="data6"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
<script>
export default {
data() {
return {
data6: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode) {
return dropNode.data.label !== 'Level two 3-1';
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
}
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
......@@ -1018,6 +1115,9 @@ Only one node among the same level can be expanded at one time.
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
| lazy | whether to lazy load leaf node, used with `load` attribute | boolean | — | false |
| draggable | whether enable tree nodes drag and drop | boolean | — | false |
| allow-drag | this function will be executed before dragging a node. if return `false`, the node can not be drag. | Function(node) | — | — |
| allow-drop | this function will be executed when dragging enter a node. if return `false`, dragging node can not be drop at the node. | Function(draggingNode, dropNode) | — | — |
### props
| Attribute | Description | Type | Accepted Values | Default |
......@@ -1060,6 +1160,12 @@ Only one node among the same level can be expanded at one time.
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
| node-drag-start | triggers when dragging start | two parameters: node object corresponding to the dragging node、event. |
| node-drag-enter | triggers when dragging node enters a node | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging enter node、event. |
| node-drag-leave | triggers when dragging node leaves a node | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging leave node、event. |
| node-drag-over | triggers when dragging over a node（like browser mouseover event） | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging over node、event. |
| node-drag-end | triggers when dragging end | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
| node-drop | triggers after dragging and dropping onto a node | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
### Scoped slot
| name | Description |
......
examples/docs/es/tree.md
View file @ 4fe58a3d
......@@ -996,6 +996,103 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
```
:::
### Draggable
Tree nodes can be drag and drop.
:::demo
```html
<el-tree
:data="data6"
node-key="id"
default-expand-all
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
</el-tree>
<script>
export default {
data() {
return {
data6: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1',
children: [{
label: 'Level three 1-1-1'
}]
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1',
children: [{
label: 'Level three 2-1-1'
}]
}, {
label: 'Level two 2-2',
children: [{
label: 'Level three 2-2-1'
}]
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1',
children: [{
label: 'Level three 3-1-1'
}]
}, {
label: 'Level two 3-2',
children: [{
label: 'Level three 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode.label, dropType);
},
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode) {
return dropNode.data.label !== 'Level two 3-1';
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
}
}
};
</script>
```
:::
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |
......@@ -1017,6 +1114,9 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
| accordion | Si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
| draggable | whether enable tree nodes drag and drop | boolean | — | false |
| allow-drag | this function will be executed before dragging a node. if return `false`, the node can not be drag. | Function(node) | — | — |
| allow-drop | this function will be executed when dragging enter a node. if return `false`, dragging node can not be drop at the node. | Function(draggingNode, dropNode) | — | — |
### props
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
......@@ -1058,6 +1158,12 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
| node-drag-start | triggers when dragging start | two parameters: node object corresponding to the dragging node、event. |
| node-drag-enter | triggers when dragging node enters a node | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging enter node、event. |
| node-drag-leave | triggers when dragging node leaves a node | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging leave node、event. |
| node-drag-over | triggers when dragging over a node（like browser mouseover event） | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging over node、event. |
| node-drag-end | triggers when dragging end | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
| node-drop | triggers after dragging and dropping onto a node | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
### Scoped slot
| name | Description |
......
examples/docs/zh-CN/tree.md
View file @ 4fe58a3d
......@@ -1065,7 +1065,7 @@
### 可拖拽节点
通过draggable属性可让节点变为可拖拽，节点只能放到相同level节点旁边。
通过 draggable 属性可让节点变为可拖拽。
:::demo
```html
......@@ -1076,7 +1076,9 @@
@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-leave="handleDragLeave"
@node-drag-over="handleDragOver"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag">
......@@ -1141,24 +1143,28 @@
handleDragStart(node, ev) {
console.log('drag start', node);
},
handleDragEnter(node, ev) {
console.log('tree drag enter: ', node.label);
handleDragEnter(draggingNode, dropNode, ev) {
console.log('tree drag enter: ', dropNode.label);
},
handleDragLeave(node, ev) {
console.log('tree drag leave: ', node.label);
handleDragLeave(draggingNode, dropNode, ev) {
console.log('tree drag leave: ', dropNode.label);
},
handleDragEnd(from, target, position, ev) {
console.log('tree drag end: ', target.label);
if (position !== null) {
console.log(`target position: parent node: ${position.parent.label}, index: ${position.index}`);
}
handleDragOver(draggingNode, dropNode, ev) {
console.log('tree drag over: ', dropNode.label);
},
allowDrop(from, target) {
return target.data.label !== '二级 3-1';
handleDragEnd(draggingNode, dropNode, dropType, ev) {
console.log('tree drag end: ', dropNode.label, dropType);
},
allowDrag(node) {
return node.data.label.indexOf('三级 3-1-1') === -1;
handleDrop(draggingNode, dropNode, dropType, ev) {
console.log('tree drop: ', dropNode.label, dropType);
},
allowDrop(draggingNode, dropNode) {
return dropNode.data.label !== '二级 3-1';
},
allowDrag(draggingNode) {
return draggingNode.data.label.indexOf('三级 3-1-1') === -1;
}
}
};
</script>
```
......@@ -1187,8 +1193,8 @@
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
| draggable | 是否开启拖拽节点功能 | boolean | — | false |
| allow-drag | 判断节点能否被拖拽 | Function(Node) | — | — |
| allow-drop | 拖拽时判定位置能否被放置 | Function(fromNode, toNode) | — | — |
| allow-drag | 判断节点能否被拖拽 | Function(node) | — | — |
| allow-drop | 拖拽时判定位置能否被放置 | Function(draggingNode, dropNode) | — | — |
### props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......@@ -1233,10 +1239,12 @@
| current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
| node-expand | 节点被展开时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| node-collapse | 节点被关闭时触发的事件 | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| node-drag-start| 节点开始拖拽时触发的事件 | 共两个参数，依次为：被拖拽节点对应的 Node、Vue传来的drag event。 |
| node-drag-enter| 拖拽进入其他节点时触发的事件 | 共两个参数，依次为：所进入节点对应的 Node、Vue传来的drag event。 |
| node-drag-leave| 拖拽离开某个节点时触发的事件 | 共两个参数，依次为：所离开节点对应的 Node、Vue传来的drag event。（注意：上个节点的leave事件有可能在下个节点enter之后执行） |
| node-drag-end | 拖拽结束时触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后指向的节点、被拖拽节点的放置位置{ parent: 位置的父节点, index: 在父节点中的序号 }、Vue传来的drag event。|
| node-drag-start | 节点开始拖拽时触发的事件 | 共两个参数，依次为：被拖拽节点对应的 Node、event。 |
| node-drag-enter | 拖拽进入其他节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event。|
| node-drag-leave | 拖拽离开某个节点时触发的事件 | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event。 |
| node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event。 |
| node-drag-end | 拖拽结束时（可能未成功）触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event。|
| node-drop | 拖拽成功完成时触发的事件 | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event。|
### Scoped slot
| name | 说明 |
......
packages/theme-chalk/src/tree.scss
View file @ 4fe58a3d
......@@ -23,9 +23,10 @@
color: mix($--color-primary, rgb(158, 68, 0), 50%);
}
@include e(drag-indicator) {
@include e(drop-indicator) {
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 1px;
background-color: $--color-primary;
}
......@@ -39,6 +40,14 @@
background-color: $--tree-node-hover-color;
}
}
@include when(drop-inner) {
> .el-tree-node__content .el-tree-node__label {
background-color: $--color-primary;
color: #fff;
}
}
@include e(content) {
display: flex;
align-items: center;
......@@ -55,14 +64,15 @@
background-color: $--tree-node-hover-color;
}
.el-tree.dragging & {
.el-tree.is-dragging & {
cursor: move;
& * {
pointer-events: none;
}
}
.el-tree.dragging.drop-not-allow & {
.el-tree.is-dragging.is-drop-not-allow & {
cursor: not-allowed;
}
}
......
packages/tree/src/model/node.js
View file @ 4fe58a3d
......@@ -168,12 +168,58 @@ export default class Node {
return getPropertyFromData(this, 'disabled');
}
get nextSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return parent.childNodes[index + 1];
}
}
return null;
}
get previousSibling() {
const parent = this.parent;
if (parent) {
const index = parent.childNodes.indexOf(this);
if (index > -1) {
return index > 0 ? parent.childNodes[index - 1] : null;
}
}
return null;
}
contains(target, deep = true) {
const walk = function(parent) {
const children = parent.childNodes || [];
let result = false;
for (let i = 0, j = children.length; i < j; i++) {
const child = children[i];
if (child === target || (deep && walk(child))) {
result = true;
break;
}
}
return result;
};
return walk(this);
}
remove() {
const parent = this.parent;
if (parent) {
parent.removeChild(this);
}
}
insertChild(child, index, batch) {
if (!child) throw new Error('insertChild error: child is required.');
if (!(child instanceof Node)) {
if (!batch) {
const children = this.getChildren() || [];
const children = this.getChildren(true);
if (children.indexOf(child.data) === -1) {
if (typeof index === 'undefined' || index < 0) {
children.push(child.data);
......@@ -357,7 +403,7 @@ export default class Node {
}
}
getChildren() { // this is data
getChildren(forceInit = false) { // this is data
if (this.level === 0) return this.data;
const data = this.data;
if (!data) return null;
......@@ -372,6 +418,10 @@ export default class Node {
data[children] = null;
}
if (forceInit && !data[children]) {
data[children] = [];
}
return data[children];
}
......
packages/tree/src/model/tree-store.js
View file @ 4fe58a3d
......@@ -6,11 +6,6 @@ export default class TreeStore {
this.currentNode = null;
this.currentNodeKey = null;
this.dragSourceNode = null;
this.dragTargetNode = null;
this.dragTargetDom = null;
this.allowDrop = true;
for (let option in options) {
if (options.hasOwnProperty(option)) {
this[option] = options[option];
......
packages/tree/src/model/util.js
View file @ 4fe58a3d
......@@ -14,3 +14,14 @@ export const getNodeKey = function(key, data) {
if (!key) return data[NODE_KEY];
return data[key];
};
export const findNearestComponent = (element, componentName) => {
let target = element;
while (target && target.tagName !== 'BODY') {
if (target.__vue__ && target.__vue__.$options.name === componentName) {
return target.__vue__;
}
target = target.parentNode;
}
return null;
};
packages/tree/src/tree-node.vue
View file @ 4fe58a3d
......@@ -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);
},
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);
handleDragStart(event) {
this.tree.$emit('tree-node-drag-start', event, this);
},
handleDragLeave(ev) {
ev.preventDefault();
if (!this.node.store.dragSourceNode) return;
this.tree.$emit('node-drag-leave', this.node, ev);
handleDragOver(event) {
this.tree.$emit('tree-node-drag-over', event, this);
event.preventDefault();
},
handleDragOver(ev) {
ev.dataTransfer.dropEffect = this.node.store.allowDrop ? 'move' : 'none';
ev.preventDefault();
handleDrop(event) {
event.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);
}
},
......
packages/tree/src/tree.vue
View file @ 4fe58a3d
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment