Javascript 层拖动－－灵活版

最新推荐文章于 2024-06-28 17:50:47 发布

dezwen

最新推荐文章于 2024-06-28 17:50:47 发布

阅读量446

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dezwen/article/details/3496694

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近做项目对Javascript要求较高，所以对它慢慢的又熟悉了。

下面放上一个较为灵活的层拖动Demo代码，一为收藏整理，二希望能对需要的朋友起一点作用，哈哈……

 
 <html>
<head>
    <title></title>
    <style type="text/css"> 
        #l1 
        {
            height: 20px;
            border: 1px solid #ccc;
            background: #f00;
            z-index: 1;
        } 
        #l2 
        {
            position: absolute;
            top: 150px;
            left: 150px;
            width: 100px;
            height: 150px;
            border: 1px solid #666;
            background: #0f0;
            z-index: 2;
        } 
        #l3 
        {
            width: 100px;
            height: 150px;
            border: 1px solid #999;
            background: #00f;
            z-index: 3;
        }
    </style>
    <script type="text/javascript">
    var x,y,z;
    var down=false;
    var oEvent,oDragTarget;
    function init(targetID){
         oEvent=event.srcElement;   //获取焦点对象 
         oDragTarget=document.getElementById(targetID);
         oEvent.setCapture();           //设置鼠标捕捉 
         z=oEvent.style.zIndex;         //取得原z轴位置 
         oEvent.style.zIndex=100;       //设定在最上层 
         x=event.offsetX;            //获取鼠标指针相对于触发事件的对象的x位置 
         y=event.offsetY;            //获取鼠标指针相对于触发事件的对象的y位置 
         down=true;                  //设置鼠标状态为按下状态 
     }
    function moveIt(){
        if(down&event.srcElement==oEvent){
            with(oDragTarget.style){
                 position="absolute";
                 posLeft=document.body.scrollLeft+event.x-x;
                 posTop=document.body.scrollTop+event.y-y;
             }
         }
     }
    function stopDrag(){
         down=false;
         oEvent.style.zIndex=z;
         oEvent.releaseCapture();//释放鼠标捕捉 
     }
    </script>
</head>
<body>
    <div id="tt" style="width: 300px; height: 300px; background-color: Gray;">
        <div id="l1" οnmοusedοwn="init('tt')" οnmοusemοve="moveIt()" οnmοuseup="stopDrag()">
            level1</div>
    </div>
    <div id="l2" οnmοusedοwn="init('l2')" οnmοusemοve="moveIt()" οnmοuseup="stopDrag()">
        level2</div>
    <div id="l3" οnmοusedοwn="init('l3')" οnmοusemοve="moveIt()" οnmοuseup="stopDrag()">
        level3</div>
</body>
</html>
 

dezwen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Javascript 层拖动－－灵活版

最近做项目对Javascript要求较高，所以对它慢慢的又熟悉了。下面放上一个较为灵活的层拖动Demo代码，一为收藏整理，二希望能对需要的朋友起一点作用，哈哈…… "text/css"> #l1 { height: 20px; border: 1px solid #
复制链接

扫一扫