HTML DIV 层拖动简单实现

最新推荐文章于 2024-07-24 16:53:23 发布

alongshow

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1.2k

点赞数

分类专栏： js jquery html 文章标签： div html function javascript microsoft 文档

本文链接：https://blog.csdn.net/alongshow/article/details/7458421

版权

js jquery html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<HTML>
    <HEAD>
        <title>WebForm8</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <script language=javascript>
        var iNodeX;
        var iNodeY;
        var oNode;
        var isDown = false;
        var iBodyWidth = 0;
        var iBodyHeight = 0;
        var iMaxTop = 0;
        var iMaxLeft = 0;
        var iMinTop = 0;
        var iMinLeft = 0;
        window.onload = function()
        {
            iBodyWidth = document.body.clientWidth;
            iBodyHeight = document.body.clientHeight;
            iMaxLeft = iBodyWidth-100;
            iMaxTop = iBodyHeight-100;
        }
        //开始拖动
        //1:在截取层上按下鼠标后设置拖动开始时初始值
        function InitDrag()
        {
            oNode=document.getElementById("div");
            oNode.setCapture();                                         //获取当前对象的鼠标捕捉
            
            iNodeZ=oNode.style.zIndex;
            oNode.style.zIndex=100;                                     //确保当前层显示在最前面 
            iNodeX=parseInt(event.offsetX);
            iNodeY=parseInt(event.offsetY); 
            isDown=true;
        }

        //拖动
        //1:限制拖动必须在底图范围内
        function OnDrag()
        {
            if(isDown)
            {
                ChangePosition();
                LimitOnTarget();
            }
        }



        //结束拖动
        //释放当前对象的鼠标捕捉
        function StopDrag()
        {
            isDown=false                                                //鼠标松开
            oNode.style.zIndex=iNodeZ                                   //还原对象的Z轴坐标值 
            oNode.releaseCapture()                                      //释放当前对象的鼠标捕捉 
        }


        //改变截取区域的位置
        function ChangePosition()
        {
            with(oNode.style)
            {
                posLeft=document.body.scrollLeft+event.x-iNodeX;        //设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标
                posTop=document.body.scrollTop+event.y-iNodeY;            //设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标 
            
            }
        }

        //限制在目标对象内拖动
        //如果超出了边缘将目标对象的最大/最小值赋给截取层
        function LimitOnTarget()
        {
            var iX = parseInt(oNode.style.left);                        //对象x坐标
            var iY = parseInt(oNode.style.top);                         //对象y坐标
            var iWidth = parseInt(oNode.style.width);                   //对象宽度
            var iHeight = parseInt(oNode.style.height);                 //对象长度
            
            var iTagX = 0                  //目标对象x坐标
            var iTagY = 0                  //目标对象y坐标
            
            var iTagWidth = iBodyWidth;             //目标对象宽度
            var iTagHeight = iBodyHeight;           //目标对象长度
            
            if(iX<iTagX)
            {
                oNode.style.left = iTagX;
            }
            if(iY<iTagY)
            {
                oNode.style.top = iTagY;
            }
            if(iX+iWidth>iTagX+iTagWidth)
            {
                oNode.style.left    = iMaxLeft;
            }
            if(iY+iHeight>iTagY+iTagHeight)
            {
                oNode.style.top        = iMaxTop;
            }
        }
        </script>
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
        <div id="div" οnmοusedοwn='InitDrag()' οnmοusemοve='OnDrag();' οnmοuseup='StopDrag()' style="position: absolute;border-top:1px solid BLUE;border-bottom:1px solid BLUE;border-right:1px solid BLUE;border-left:1px solid BLUE; background-color:red; filter: Alpha(opacity=30);width:100;height:100"></div>
        </form>
    </body>
</HTML>

alongshow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML DIV 层拖动简单实现

WebForm8 var iNodeX; var iNodeY; var oNode; var isDown = false; var iBodyWidth = 0; var iBodyHei
复制链接

扫一扫

专栏目录