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

    版权声明：转载时请以超链接形式标明文章原始出处 http://blog.lonelystar.org/post/17.html

    一个小代码
     
    类似资源管理器效果
     
    支持鼠标拖拽
     
    没写些细节东西
     
     
    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>

    Tag：资源管理器  鼠标拖拽  目录树  
    lonelystar 发表于2011年3月30日 | 分类：JavaScript小代码 | 评论: 2 | 引用: 0 | 浏览:

      本文现有2 条评论

    • 1  不错，收藏了

      lin1605 | 发表于2011-7-1 12:35:43 [回复]

    • 2  [URL][/URL][QUOTE][/QUOTE][S][/S][U][/U][I][/I][/B]Sleep[B][EMAIL=@][/EMAIL][EMAIL][/EMAIL][URL=http://][/URL]

      123 | 发表于2011-8-22 20:25:40 [回复]

    欢迎您发表评论：

     
    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。