09.04 如何实现 与 其他 DOM 的拖拽交互 —— zTree 进阶

简介

拖拽节点到其他 DOM 内进行交互，这种需求在 zTree 的应用中并不多，主要这种操作需求也是极少的，本篇主要针对 zTree 提供的 Demo 做一定的讲解分析。

看这篇文档时，你需要对照 API 文档进行学习（http://www.treejs.cn/v3/api.php）

参考 Demo：http://www.treejs.cn/v3/demo.php#_511

主要用到的 zTree 配置

• setting.edit.drag.prev / next / inner

主要用于限制 zTree 节点在树内部拖拽

• setting.callback.beforeDrag

主要用于限制 哪些节点可以被拖拽

• setting.callback.onDrop

主要用于对拖拽结束时进行处理

// 这部分代码需要解释一下
dropTree2Dom: function(e, treeId, treeNodes, targetNode, moveType) {
	var domId = "dom_" + treeNodes[0].getParentNode().id;
        // 判断节点是否拖拽到指定的 DOM 内
	if (moveType == null && (domId == e.target.id || $(e.target).parents("#" + domId).length > 0)) {
                // 拖拽到指定 DOM 内，先吧节点从树上移除
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.removeNode(treeNodes[0]);
                // 在目标 DOM 内添加节点对应的数据显示
		var newDom = $("span[domId=" + treeNodes[0].id + "]");
		if (newDom.length > 0) {
			newDom.removeClass("domBtn_Disabled");
			newDom.addClass("domBtn");
		} else {
			$("#" + domId).append("<span class='domBtn' domId='" + treeNodes[0].id + "'>" + treeNodes[0].name + "</span>");
		}
		MoveTest.updateType();
	} else if ( $(e.target).parents(".domBtnDiv").length > 0) {
		alert(MoveTest.errorMsg);
	}
},

• setting.callback.onDragMove

主要用于判断 拖拽过程中，节点是否被拖拽到指定 DOM 内

• setting.callback.onMouseUp

需要与目标 DOM 的 mousedown、mousemove、mouseup 配套使用，参考 Demo 源码中的方法：dom2Tree、bindMouseDown、bindMouseMove、bindMouseUp

总结

• 拖拽交互，尤其是普通 DOM 的拖拽，希望大家一定要多做练习搞明白拖拽的原理
• 在 HTML5 中，已经有了新的事件来专门处理拖拽，有兴趣的朋友可以了解一下HTML 5 拖放。
• 在实际应用中，肯定还有更多的细节需要考虑，例如 数据保存，交互设计等等。 希望这篇文章能对你有所帮助。