zTree拖拽效果

阅读更多

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

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

代码如下：

 

 

 html

 

 

 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。你也可以自己根据需要，改成不同了。

附效果图一张：

 

 

 

 

 

• JQuery_zTree_v3.3.zip (709.9 KB)
• 下载次数: 83

• 
• 大小: 19.4 KB

• 查看图片附件