码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript ev.clientX 拖动

时间:2016-08-15 22:24:14      阅读:717      评论:0      收藏:0      [点我收藏+]

标签:

//鼠标拖动div1
var oDiv=document.getElementById(‘div1‘);
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;
    document.onmousemove=function(ev){
        var oEvent=ev||event;
        oDiv.style.left=oEvent.clientX-disX+‘px‘;
        oDiv.style.top=oEvent.clientY-disY+‘px‘;
        oDiv.innerHTML = "ev.clientX : "+ ev.clientX +  "<br/>ev.clientY : "+ ev.clientY
                + "<br/> evOffsetX  : " +disX+ "<br/> evOffsetY  : " +disY
                +  "<br/> left  : " +  oDiv.style.left    +  "<br/> TOP : " +  oDiv.style.top ;

    }
    document.onmouseup=function(ev){
        document.onmousemove=null;
        document.onmousedown=null;
    }
    return false;
}

  

<body>
  <div id="div1" style=" position: absolute ;left: 20px; top:100px; background: yellowgreen ; width: 100px ; height: 100px "></div>
</body>

  

JavaScript ev.clientX 拖动

标签:

原文地址:http://www.cnblogs.com/July-/p/5774340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!