用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

无限分类菜单(支持鼠标拖拽移动目录)

2012-10-18 作者: 小蜜锋举报

[javascript]代码库

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</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)},
LSDrag={
	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() {
				LSDrag.DragBegin(this)
			};
			E.onmouseover = function() {
				LSDrag.TargetDOM && LSDrag.DragOver(this)
			};
			E.onmouseout = function() {
				LSDrag.TargetDOM && LSDrag.DragOut(this)
			};

			E.onmouseup = function() {
				LSDrag.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) {
		LSDrag.TargetDOM = o;
	},
	DragEnd : function(o) {
		var TargetDOM = LSDrag.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 = '';
					LSDrag.TargetDOM = null;
					return;
				}
			}
			(v = pNode.getElementsByTagName('ul')).length ? // 目标文件夹下有ul,添加自己到ul里最后
			v[0].appendChild(pTNode) : (pNode.appendChild(document
					.createElement('ul'))).appendChild(pTNode);
		}
		LSDrag.TargetDOM = null;
	}
};
LSDrag.InitHerf($('dContainer'));
</script>
</body>
</html>

[代码运行效果截图]


无限分类菜单(支持鼠标拖拽移动目录)


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...