支持鼠标拖拽的简单目录树代码

作者：lonelystar 来源：lonelystar博客时间：2011-07-01 12:34:09　

一个小代码

类似资源管理器效果

支持鼠标拖拽

没写些细节东西

JavaScript语言:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>www.cidianwang.com</title></head><body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"><div id="dContainer" style="z-index:1"> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a> <ul> <li><a href="">4-1</a></li> <li><a href="">4-2</a></li> <li><a href="">4-3</a></li> </ul> </li> </ul></div><script>var $=function(id){return document.getElementById(id)}, * rag={ TargetDOM:null, //储存当前拖拽的DOM对象引用 InitHerf:function(o){ //传递一个DOM对象，给其中的a添加mouseover和mouseout事件 var v=o.getElementsByTagName('a'),L=v.length,E; while(L--){ (E=v[L]).onmousedown=function(){ * rag.DragBegin(this)}; E.onmouseover=function(){ * rag.TargetDOM&& * rag.DragOver(this)}; E.onmouseout=function(){ * rag.TargetDOM&& * rag.DragOut(this)}; E.onmouseup=function(){ * rag.DragEnd(this)}; } }, DragOver:function(o){ o.style.backgroundColor='#888'; o.style.color='#FFF'; }, DragOut:function(o){ o.style.backgroundColor=''; o.style.color=''; }, DragBegin:function(o){ * rag.TargetDOM=o; }, DragEnd:function(o){ var TargetDOM= * rag.TargetDOM,pTNode=TargetDOM.parentNode, pNode=o.parentNode,v=pTNode.getElementsByTagName('a'),L=v.length; switch(true){ case TargetDOM==o: //这里写点击链接后发生的事件 break; case pNode==pTNode.parentNode.parentNode: alert('无法移动，目标文件夹与源文件夹相同!'); break; default: while(L--){ if(v[L]==o){ alert('不能移动到子目录下!'); o.style.backgroundColor=''; o.style.color=''; * rag.TargetDOM=null; return; } } (v=pNode.getElementsByTagName('ul')).length? //目标文件夹下有ul,添加自己到ul里最后 v[0].appendChild(pTNode):(pNode.appendChild(document.createElement('ul'))).appendChild(pTNode); } * rag.TargetDOM=null; }}; * rag.InitHerf($('dContainer'));</script></body></html>

标签：鼠标,拖拽,树

投稿

支持鼠标拖拽的简单目录树代码

猜你喜欢

Python命令行解析器argparse详解

MySQL日期数据类型、时间类型使用总结

PhpStorm配置debug环境的详细过程

举例讲解Python中metaclass元类的创建与使用

php实现网站留言板功能

Python快速实现一键抠图功能的全过程

用javascript实现简单计算器

node.js应用后台守护进程管理器Forever安装和使用实例

Python爬取网页信息的示例

SEO与“nofollow”及“external nofollow”

几个好用的Asp自定义函数

MySQL与SQLserver的差异对比

JavaScript实现点击按钮直接打印

ROS1 rosbag的详细使用并且使用python合并bag包的方法

Python中map,reduce,filter和sorted函数的使用方法

Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法

关于Math.PI、前自增和后自增

Python和Pycharm 环境部署详细步骤

python 执行终端/控制台命令的例子

一篇文章掌握MySQL的索引查询优化技巧