位置：首页>> 网络编程>> JavaScript>> 支持鼠标拖拽的简单目录树代码

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

作者：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>

0

投稿

猜你喜欢

作为Web开发人员，我为什么喜欢Google Chrome浏览器
在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Fire
如何利用SQL Server数据库快照形成报表
在SQL Server 2005中，它的另外一个强大的新特点是数据库快照。数据库快照是一个数据库的只读副本，它是数据库所有数据的映射，由快照
CSS+asp仿迅雷人气指数
大家都熟悉迅雷看看里面的电影人气指数这个小图标吧先看看我的效果图再看看迅雷的截图比较好看，是根据电影的人气指数来显示热度，下面我们就来模仿一
SQL Server 2000安装故障
问：我想问一下我在重新装完系统以后装SQL Server2000时提示:以前某个程序安装已在计算机上创建挂起的文件操作,运行安装
ASP MSSQL存储过程的实现小例
sql代码如下:CREATE PROCEDURE Proname //使用CREATE PROCED
SQL查询重复记录
假设现有一张人员表（表名：Person），若想将姓名、身份证号、住址这三个字段完全相同的记录查找出来，使用1: SELECT p
利用XMLHTTP检测网址及探测服务器类型
主要利用了XMLHTTP的一些方法和属性来获取服务器的信息。以下是全部源代码： &
用Mysql查询语句记录
常用Mysql查询语句记录一、授权1.授权本地用户对所有数据库具有所有权限> grant all privileges on
mysql5.58的编译安装
cmake-2.8.3.tar.gzmysql-5.5.8.tar.gz一，cmake-2.8.3的安装：tar -zxf cmake-2.
在sql Server自定义一个用户定义星期函数
文件：.wmv；大小：19,535KB；长度：00:26:39。下载地址：SqlFunction_udf_Week.rar以下内容于201
另类解读SQL Server中的DateTime数据类型
看到这个标题，你我可能都笑了。你会笑，因为你以为这个东西太小儿科了，还用得着做一个标题?!我会笑，是因为我确信你看完后会改变你的想法。首先我
选项卡动态增删的效果（内嵌框架）
蓝色混迹多年，偷师学艺不少，这次花了2天时间写了点东西发出来送给需要的吧。先放个图片，我改下代码。重构完成 IE 6
亚马逊购物用户体验分析 (二)
上期回顾:亚马逊购物用户体验分析 (一)“查找内部”功能书是在亚马逊最常被购买的产品之一，所以毋庸置疑亚马逊的开发小组已经建立了一个关于“查
一个oracle指令的好网站
今天发现了一个显示ORACLE语法的好网站。内容太多，就不一一摘录了，记在这里，也方便自己查找。http://ss64.com/ora/ 目
用户是如何浏览你的网站的
事实上，互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面，扫视一些文字，并点击第一个引起他兴趣的链接。在
分享216色网页拾色器（调色板）
分享一个 * 真网页拾色器（调色板），颜色丰富216色，使用方便。运行截图：<html id="container"
IE window对象介绍
window对象表示浏览器中打开的窗口，提供关于窗口状态的信息。可以用window对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览
CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站
asp如何修改WINNT的登录密码？
如何修改NT的登录密码？代码见下：<％Sub ChangeUserPassword(C
Oracle存储过程入门学习基本语法
1.基本结构 create OR REPLACE PROCEDURE存储过程名字 ( 参数1 IN NUMBER, 参数2 IN NUMBE

QQ聊天窗口链接提示效果代码

可以输入的下拉菜单

蚁群算法js版

分享216色网页拾色器（调色板）

JavaScript 组件之旅（四）：测试 JavaScript 组件

JS中实现JAVA的hashCode算法

ajax xmlhttp getResponseHeader实例教程

JavaScript控制flash操作兼容IE FF[译]

实现一个获取元素样式的函数getStyle

可输入的select代码

MySQL5创建存储过程实例

CSS技巧之圆角背景与三角形

下拉框二级联动的JavaScript代码

Twitter推新服务自动为用户建交谈列表(图)

asp中限制重复提交表单的方法

ASP使用wsImage组件给图片加水印

JS完美实现对象克隆

原创做网站心态尤其重要给站长的十点建议

“坚持是站长的法宝”你能坚持多久呢

设计和布局之间的思考

手机版 网络编程 asp之家 www.aspxhome.com