因业务场景需要一个可拖拽修改节点位置的树形组件，因此动手撸了一个，乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出，简单说下实现方式。

1.树形结构-组件递归使用

树形结构非常简单，tree组件作为父组件，结构如下

tree.vue

复制代码

vue组件允许在它们自己的模板中调用自身，因此可以形成树形结构，在组件中必须填写唯一的name。

tree-node.vue

复制代码

2.HTML5拖拽api

1.draggable属性规定元素是否可拖动,目前Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性

2.HTML 5 拖放api

ondragstart： 元素开始被拖动时触发 作用在拖拽元素上

ondragenter：当拖曳元素进入目标元素的时候触发的事件，作用在目标元素上

ondragover：拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上

ondragleave：拖拽元素拖离开了目标元素时触发，作用在目标元素上

ondrop：被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上

ondragend：当拖拽完成后触发的事件，作用在被拖曳元素上

3.拖拽节点

定义变量

处理拖拽节点需要几个关键变量

当前拖拽的节点

拖拽时经过的节点

最终放置的节点

因此定义了一个用于保存拖拽信息的对象

dragOverStatus: {

overNodeKey: "",

dropPosition: "",

dragNode: {}

}

复制代码

绑定拖拽事件

这里将ondragstart事件绑定在子元素上，将其他事件绑定在父元素上，因为在测试真机IE10的时候，发现ondragstart和其他事件绑定在同一个元素上，无法触发ondragenter等事件。

复制代码mounted() {

//绑定拖拽事件

if (this.root.draggable) {

this.$refs.draggAbleDom.draggable = !this.nodeData.noDrag;

this.$refs.draggAbleDom.ondragstart = this.onDragStart;

this.$refs.dropTarget.ondragenter = this.onDragEnter;

this.$refs.dropTarget.ondragover = this.onDragOver;

this.$refs.dropTarget.ondragleave = this.onDragLeave;

this.$refs.dropTarget.ondrop = this.onDrop;

this.$refs.dropTarget.ondragend = this.onDragEnd;

}

}

复制代码

触发某节点的拖拽事件时，就可以从拖拽事件里拿到当前节点实例。

使用HTML5提供的专门的拖拽与拖放API，原生的实现了复杂的操作，不需要自己用鼠标事件模拟，因此实现拖拽效果非常简单。

(1).开始拖拽：在拖拽元素上触发，事件内只需要保存当前拖拽节点的信息即可

onDragStart(e, treeNode) {

this.dragOverStatus.dragNode = {

nodeData: treeNode.nodeData,

parentNode: treeNode.parentNodeData

};

this.$emit("on-dragStart", {

treeNode: treeNode.nodeData,

parentNode: treeNode.parentNodeData,

event: e

});

}

复制代码

(2).进入目标节点：在目标元素上触发，主要保存当前经过的节点的key，然后向外层发出事件，供组件调用者做其他操作。为了避免拖拽一个元素快速经过许多个节点时频繁发出事件，设置定时器当停留一定时间后触发。

onDragEnter(e, treeNode) {

//当没有设置拖拽节点时，禁止作为目标节点

if (!this.hasDragNode()) {

return;

}

this.dragOverStatus.overNodeKey = "";

//拖拽节点与目标节点是同一个，return掉

if (

treeNode.nodeData._hash === this.dragOverStatus.dragNode.nodeData._hash

) {

return;

}

this.dragOverStatus.overNodeKey = treeNode.nodeData._hash; //当前经过的可放置的节点的key

//当前节点禁止做为放置节点时

if (treeNode.nodeData.noDrop) {

return;

}

//设置dragEnter定时器，停留250毫秒后触发事件

if (!this.delayedDragEnterLogic) {

this.delayedDragEnterLogic = {};

}

Object.keys(this.delayedDragEnterLogic).forEach(key => {

clearTimeout(this.delayedDragEnterLogic[key]);

});

this.delayedDragEnterLogic[

treeNode.nodeData._hash

] = setTimeout(() => {

if (!treeNode.nodeData.isExpand) {

treeNode.toggleCollapseStatus();

}

this.$emit("on-dragEnter", {

treeNode: treeNode.nodeData,

parentNode: treeNode.parentNodeData,

event: e

});

}, 250);

}

复制代码

(3).在目标节点上经过：在目标元素上触发，即时计算鼠标在目标节点上的位置，用于判断最终的放置位置，0(作为目标节点的子节点)，-1(放置在目标节点的前面)，1(放置在目标节点的后面)，显示相应的样式。

onDragOver(e, treeNode) {

//当没有设置拖拽节点时，禁止作为目标节点

if (!this.hasDragNode()) {

return;

}

if (

this.dragOverStatus.overNodeKey === treeNode.nodeData._hash

) {

this.dragOverStatus.dropPosition = this.calDropPosition(e); //放置标识0，-1,1

}

this.$emit("on-dragOver", {

treeNode: treeNode.nodeData,

parentNode: treeNode.parentNodeData,

event: e

});

this.dragOverClass = this.setDragOverClass();//设置鼠标经过样式

},

复制代码

当鼠标处于目标节点内目标节点偏上方(1/5处)，则意为放在目标节点前面-同级，当鼠标处于目标节点内目标节点偏下方(1/5处)，意为放在目标节点后面-同级，否则作为目标节点的子节点

calDropPosition(e) {

var offsetTop = this.getOffset(e.target).top;

var offsetHeight = e.target.offsetHeight;

var pageY = e.pageY;

var gapHeight = 0.2 * offsetHeight;

if (pageY > offsetTop + offsetHeight - gapHeight) {

//放在目标节点后面-同级

return 1;

}

if (pageY < offsetTop + gapHeight) {

//放在目标节点前面-同级

return -1;

}

//放在目标节点里面-作为子节点

return 0;

}

复制代码

(4).放置节点:在目标元素上触发，此时将拖拽的信息变量作为参数将事件发射到外层，其余操作由外层来决定即可。

onDrop(e, treeNode) {

//当没有设置拖拽节点时，禁止作为目标节点

if (!this.hasDragNode()) {

return;

}

//当前节点禁止拖拽时

if (treeNode.nodeData.noDrop) {

return;

}

//拖拽节点与目标节点是同一个，不做任何操作

if (

this.dragOverStatus.dragNode.nodeData._hash === treeNode.nodeData._hash

) {

return;

}

var res = {

event: e,

dragNode: this.dragOverStatus.dragNode,

dropNode: {

nodeData: treeNode.nodeData,

parentNode: treeNode.parentNodeData

},

dropPosition: this.dragOverStatus.dropPosition

};

this.$emit("on-drop", res);

}

复制代码

(5).拖拽结束:作用在拖拽元素上，拖拽结束后将清除变量，恢复样式。

onDragEnd(e, treeNode) {

//当没有设置拖拽节点时，禁止作为目标节点

if (!this.hasDragNode()) {

return;

}

//当前节点禁止拖拽时

if (treeNode.nodeData.noDrop) {

return true;

}

this.dragOverStatus.dragNode = null;

this.dragOverStatus.overNodeKey = "";

this.$emit("on-dragEnd", {

treeNode: treeNode.nodeData,

parentNode: treeNode.parentNodeData,

event: e

});

}

复制代码

4.应用

调用树形拖拽组件，获取拖拽过程中的拖拽节点，目标节点，以及放置位置，具体处理拖拽结果由调用方决定，可以是通过调接口更新树结构，也可以由前端处理输入数据，更新视图。

复制代码getDropData(info) {

var dragData = info.dragNode.nodeData;

var dragParent = info.dragNode.parentNode;

var dropData = info.dropNode.nodeData;

var dropParent = info.dropNode.parentNode;

var dropPosition = info.dropPosition; //0作为子级，-1放在目标节点前面，1放在目标节点后面

//把拖拽元素从父节点中删除

dragParent.children.splice(dragParent.children.indexOf(dragData), 1);

if (dropPosition === 0) {

dropData.children.push(dragData);

} else {

var index = dropParent.children.indexOf(dropData);

if (dropPosition === -1) {

dropParent.children.splice(index, 0, dragData);

} else {

dropParent.children.splice(index + 1, 0, dragData);

}

}

}

复制代码

作为子节点，改变层级

修改排序，将拖拽节点放在目标节点后面

修改排序，将拖拽节点放在目标节点前面