[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>
[代码运行效果截图]