javaScript小问题,托拽元素,获得当前鼠标的坐标

#div1,#div3
{
    width: 400px;
    height: 400px;
    position: absolute;
    left:400px;
    top:100px;
    border:2px solid red;
    perspective: 0px;

今天希望在#div1上面添加事件
var oDiv1=document.getElementById("div1");
  oDiv1.onclick=function(){
//              获取当前鼠标的位置
              alert("nihao");
              var clientX=document.documentElement.clientWidth;
              alert(clientX);
但是怎样点击鼠标也没有弹出对话框,原因是#div1,和#div3重合了。
获取鼠标点击在屏幕上的坐标,这个地方在在div中添加的一个事件,当点击的时候会调用一个匿名的函数,而且匿名的函数也会调用getMousePos这个函数,我们需要注意的是函数的参数ev,而且这个函数返回的是一个数组,我们接受到之后就是一个数组,利用点来引用参数里面的对用的值
   oDiv1.onclick=function(ev){
//              获取当前鼠标的位置
              var arr=getMousePos(ev);
                alert(arr.x+","+arr.y);
            }
        }
        function getMousePos(event)
        {
            var e=event||window.event;
            return {'x': e.clientX,'y': e.clientY};
        }

这个函数的作用是实现托拽,只要我们获得标签对象调用这个函数,点击鼠标右键,就可以实现对元素的托拽
       function drag(oDiv) {
                oDiv.onmousedown = function (ev) {
                    oEve = ev || event;
                    var DisL = oEve.clientX - oDiv.offsetLeft;
                    var DisT = oEve.clientY - oDiv.offsetTop;
                    document.onmousemove = function (ev) {
                        var even = ev || event;
                        var L = even.clientX - DisL;
                        var T = even.clientY - DisT;
                        if (L < 0) {
                            L = 0;
                        }
//                    怎样获取可视部分的宽度
                        else if (L > document.documentElement.clientWidth - 60) {
                            L = document.documentElement.clientWidth - 60;
                        }
                        if (T < 0) {
                            T = 0;
                        }
                        else if (T > document.documentElement.clientHeight - 60) {
                            T = document.documentElement.clientHeight - 60;

                        }
                        oDiv.style.left = L + "px";
                        oDiv.style.top = T + "px";
                    }
                }
                oDiv.onmouseup = function () {
                    document.onmousedown = null;
                    document.onmousemove = null;
                }
            }



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值