zTree拖拽效果

最近好久没更新博客了，今天来一篇。以前都在做android的小软件，现在我想想还是做web吧。感觉自己还是比较喜欢做web，将来找工作也希望web方向的。因为我觉得1，android如果要学的深的话多少会和c等底层语言打交道，这些貌似很高深，没大牛指导感觉即使很努力，估计也没用。2，html5也出来了，即使分成两套标准了，可是也是趋势，估计以后的android应用如果不是和硬件交互的，估计都会做成网页的形式，这样其他平台也顺便可以用了，节约成本。3个人比较喜欢web。

废话不多了。。最近做东西要用到zTree，就花了点时间看了下zTree 的API和demo。发现demo里的拖拽很帅，同时也是我需要的效果，就顺了过来，改成了自己需要的效果。

代码如下：

 

<script type="text/javascript">
		
		var MoveTest = {
			errorMsg: "请选择正确的用户",
			curTarget: null,
			curTmpTarget: null,
			noSel: function() {
				try {
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				} catch(e){}
			},
			dragTree2Dom: function(treeId, treeNodes) {
				return !treeNodes[0].isParent;
			},
			prevTree: function(treeId, treeNodes, targetNode) {
				return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
			},
			nextTree: function(treeId, treeNodes, targetNode) {
				return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
			},
			innerTree: function(treeId, treeNodes, targetNode) {
				return targetNode!=null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
			},
			dropTree2Dom: function(e, treeId, treeNodes, targetNode, moveType) {
				var domId = "dom_" + treeNodes[0].getParentNode().id;
				if (moveType == null) {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					var id=treeNodes[0].getParentNode().id;
					var shopid=treeNodes[0].id;
					//删除数据
					$.post("deleteShopUser.action",{id:id/100000,shopid:shopid/10000000000},function(data)
					{
						if(data==1)
						{
							zTree.removeNode(treeNodes[0]);
							MoveTest.updateType();
						}
					})
				}
			},
			dom2Tree: function(e, treeId, treeNode) {
				var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
				if (!target) return;
				var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parentNode;
				if (treeNode != null && treeNode.id>=100000&&treeNode.id<10000000000) {
					parentNode = treeNode;
					parentNode.isParent = true;
					//添加数据;
					$.post("addShopUser.action",{id:parentNode.id/100000,shopid:target.attr("domId")},function(data)
					{
						if(data==0)
						{
							alert("用户: "+parentNode.name+" 已经可管理店铺: "+target.text());
							return;
						}
						else
						{
							if (tmpTarget) tmpTarget.remove();
							if (!!parentNode) {
								var nodes = zTree.addNodes(parentNode, {id:target.attr("domId")+"0000000000", name: target.text(),icon:'../IMAGES/shop.png'});
								zTree.selectNode(nodes[0]);
							} else {
								alert(MoveTest.errorMsg);
							}
							MoveTest.updateType();
							MoveTest.curTarget = null;
							MoveTest.curTmpTarget = null;
						}
					});
				}
			},
			updateType: function() {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
				nodes = zTree.getNodes();
				for (var i=0, l=nodes.length; i<l; i++) {
					var usernodes=nodes[i].children;
					for(var j=0;j<usernodes.length;j++)
					{
						var num = usernodes[j].children ? usernodes[j].children.length : 0;
						usernodes[j].name = usernodes[j].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
						zTree.updateNode(usernodes[j]);
					}
				}
			},
			bindDom: function() {
				$(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
			},
			bindMouseDown: function(e) {
				var target = e.target;
				if (target!=null && target.className=="domBtn") {
					var doc = $(document), target = $(target),
					docScrollTop = doc.scrollTop(),
					docScrollLeft = doc.scrollLeft();
					curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
					curDom.appendTo("body");

					curDom.css({
						"top": (e.clientY + docScrollTop + 3) + "px",
						"left": (e.clientX + docScrollLeft + 3) + "px"
					});
					MoveTest.curTarget = target;
					MoveTest.curTmpTarget = curDom;

					doc.bind("mousemove", MoveTest.bindMouseMove);
					doc.bind("mouseup", MoveTest.bindMouseUp);
					doc.bind("selectstart", MoveTest.docSelect);
				}
				if(e.preventDefault) {
					e.preventDefault();
				}
			},
			bindMouseMove: function(e) {
				MoveTest.noSel();
				var doc = $(document), 
				docScrollTop = doc.scrollTop(),
				docScrollLeft = doc.scrollLeft(),
				tmpTarget = MoveTest.curTmpTarget;
				if (tmpTarget) {
					tmpTarget.css({
						"top": (e.clientY + docScrollTop + 3) + "px",
						"left": (e.clientX + docScrollLeft + 3) + "px"
					});
				}
				return false;
			},
			bindMouseUp: function(e) {
				var doc = $(document);
				doc.unbind("mousemove", MoveTest.bindMouseMove);
				doc.unbind("mouseup", MoveTest.bindMouseUp);
				doc.unbind("selectstart", MoveTest.docSelect);

				var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
				if (tmpTarget) tmpTarget.remove();

				if ($(e.target).parents("#treeDemo").length == 0) {
					if (target) {
						target.removeClass("domBtn_Disabled");
						target.addClass("domBtn");
					}
					MoveTest.curTarget = null;
					MoveTest.curTmpTarget = null;
				}
			},
			bindSelect: function() {
				return false;
			}
		};
		
		var setting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag: {
					prev: MoveTest.prevTree,
					next: MoveTest.nextTree,
					inner: MoveTest.innerTree
				}
			},
			async: {
				enable: true,
				url:"userList.action"
			},
			data: {
				keep: {
					parent: true,
					leaf: true
				},
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: MoveTest.dragTree2Dom,
				onDrop: MoveTest.dropTree2Dom,
				onMouseUp: MoveTest.dom2Tree
			},
			view: {
				selectedMulti: false
			}
		};
		$(document).ready(function(){
		
			 $.post("shopList.action", function(data) {
			 	var jsondata=strCut(data);
				$.each(jsondata,function(index)
				{
					var obj=jsondata[index];
					var shop="<span class='domBtn' domId='"+obj.id+"'>"+obj.name+"</span>"
					$("#dom_1").append(shop);
				});
				
				$.fn.zTree.init($("#treeDemo"), setting);
				MoveTest.updateType();
				MoveTest.bindDom();
			 });
			
		});
	</script>

 

 html

 

<div>
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="domBtnDiv">
			<div id="dom_1" class="categoryDiv"></div>
		</div>

 

 css

 

.dom_line {margin:2px;border-bottom:1px gray dotted;height:1px}
.domBtnDiv {display:block;padding:2px;border:1px gray dotted;
background-color:powderblue;float:left;margin-top:10px;margin-left:10px;}
.categoryDiv {display:inline-block; width:600px;height:450px;}
.domBtn {display:inline-block;cursor:pointer;padding:2px;
margin:2px 10px;border:1px gray solid;background-color:#FFE6B0}
.dom_tmp {position:absolute;font-size:12px;}

 

ajax调用了addShopUser.action和deleteShopUser.action返回值都为1，这你们可以自己模拟。只要访问两个路径，回调值为1就行了。还有userList.action是返回树的数据，格式如"[{id:1,name:'fhy1',pId:0,open:true}, {id:2,name:'我的店铺',pId:1} ]"

 

当然你要导入zTree的相关js和jquery相关js。附件里有。当然附件里有原来的demo，路径是JQuery zTree v3.3\demo\cn\super\dragWithOther.html。你也可以自己根据需要，改成不同了。

附效果图一张：

 

 

 

 

 

评论

1 楼 cnyangqi 2013-07-09  

。。。我还以为是demo。。。