js 获取坐标

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_30511107

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量2.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/coolkiss/archive/2009/04/02/1428063.html

版权

这两天没事干写了drag，弄了好久，主要是获取鼠标坐标，因为要兼容FF，所以遇到了不少问题，备忘一下

一、js获取坐标位置

1.1 首先是event，这个只有IE支持，FF不支持，所以如果FF里要用只能在函数上加多一个参数，例如function move(event)，这样就可以在函数里面用event了

1.2 获取坐标：event.X 和event.Y 这两个只支持IE，取出来值是相对父元素的位置

1.3 event.pageX 和event.pageY 这两个支持FF，不支持IE，同样取出来的值也是相对父元素的。

1.4 event.clientX 和event.clientY 支持FF,IE，不包含滚动条，所以要取具体相对浏览器的位置就得加上document.documentElement.scrollLeft

二、JQuery的东东

2.1 取某个ID的元素：$("#Frametop")

2.2 为某个ID添加方法 $("#Frametop").mousemove(move) move要添加的方法，$("#Frametop").mouseup(up)

jquery事件的一些总结：http://www.cnblogs.com/Clingingboy/archive/2008/02/14/1068908.html

2.3 取消事件绑定 $("#Frametop").unbind()

2.4 获取和设置样式获取：$("#Frametop").css('align'); 设置 $("#Frametop").css({'align','left'});

2.5 源代码

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="jquery.js"></script>
        <script typ="text/javascript" language="JavaScript">
            var leftpx=0;
            var toppx=0;
            var left=0;
            var tops=0;
            function AddFrame(txt)
            {

            }
            function Drag(event)
            {
                //为Frametop添加事件
                $("#Frametop").mousemove(Move);
                $("#Frametop").mouseup(Release);

                $("#Frametop").css({'cursor':'move'});
                var a = $("#Frametop");

                if(!event) event = window.event;

                //取出鼠标距离Frame边界的长度 Firefox
                if(event.pageX||event.pageY)
                {
                    leftpx = event.pageX-$("#Frame").css("left").replace('px','');
                    //alert(event.pageX);
                    toppx = event.pageY-$("#Frame").css("top").replace('px','');
                }
                else//ie
                {
                    if(document.all)
                    {
                        var box = document.getElementById("Frame").getBoundingClientRect();
                        leftpx = event.clientX + document.documentElement.scrollLeft - box.left;
                        toppx = event.clientY + document.documentElement.scrollTop+20 - box.top;
                        //alert(leftpx);
                    }
                    else
                    {
                        leftpx = event.clientX + document.documentElement.scrollLeft - $("#Frame").css("left").replace('px','');
                        toppx = event.clientY + document.documentElement.scrollTop - $("#Frame").css("top").replace('px','');
                        alert(toppx);
                    }
                }
                //捕获事件，ie为setCapture,ff不支持该方法，所以用window.captureEvents
                if(a.setCapture)
                {
                    a.setCapture();
                }
                else if(window.captureEvents)
                {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                }

            }
            //鼠标移动方法
            function Move(event)
            {
                //定义event
                if(!event) event = window.event;
                //取出当前鼠标位置，并算出Frame的位置
                if(event.pageX||event.pageY)
                {
                    left = event.pageX - leftpx;
                    tops = event.pageY - toppx;
                }
                else//ie
                {
                    alert("abc");
                    left = event.clientX +  document.documentElement.scrollLeft - leftpx;
                    tops = event.clientY+ document.documentElement.scrollTop-toppx;
                }
                //设置样式
                $("#Frame").css({'left':left});
                $("#Frame").css({'top':tops});

            }
            //mouseup事件
            function Release()
            {
                var frametop = $("#Frametop");
                //释放捕捉，IE为releaseCapture
                if(frametop.releaseCapture)
                {
                    frametop.releaseCapture();
                }
                else if(window.captureEvents)
                {
                    window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                    var d = document;
                    d.onmousemove = null;
                    d.onmouseup = null;
                }
                //取消事件绑定
                frametop.unbind();
                $("#Frametop").css({'cursor':'auto'});
            }
        </script>

    </head>
    <body>
        <div id="Main">
            <div id="Head">
                <input type="button" value="新建窗口" onclick="AddFrame(sth)" />
            </div>
            <div id="Contain">
                <div id="Frame">
                    <div id="Frametop" onmousedown="Drag(event)">Title</div>
                    <div id="FrameContain">

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS文件

Code
body
{
    margin:0;
    padding:0;
    font-size:small;
}

#Main
{
    width:100%;
}

#Head
{
    width:100%;
    height:50px;
    padding-top:40px;
    border-bottom:dotted black 1px;
}

#Contain
{
    width:100%;
}

#Frame
{
    margin-top:20px;
    position:absolute;
}

#Frametop
{
    display:block;
    background-color:#ebffff;
    border:solid 1px #0c90c4;
    height:20px;
    width:250px;
}

#FrameContain
{
    height:250px;
    width:250px;
    border:solid 1px #0c90c4;
    border-top:none;
}

开始上班，以后要多点总结才行，嘿嘿~~

转载于:https://www.cnblogs.com/coolkiss/archive/2009/04/02/1428063.html

weixin_30511107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 获取坐标

这两天没事干写了drag，弄了好久，主要是获取鼠标坐标，因为要兼容FF，所以遇到了不少问题，备忘一下一、js获取坐标位置1.1 首先是event，这个只有IE支持，FF不支持，所以如果FF里要用只能在函数上加多一个参数，例如function move(event)，这样就可以在函数里面用event了1.2 获取坐标：event.X 和event.Y 这两个只支持IE，取出来值是相对...
复制链接

扫一扫