用户注册



邮箱:

密码:

用户登录


邮箱:

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

发表随想


还能输入: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、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

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

加载中,请稍后...