随笔- 31 文章- 0 评论- 525 阅读- 32万

鼠标拖移对象

昨天在某位大仙博客上看到他在BS那些前端水平差的浮燥人士，BS那些“连用原生JS写拖放效果的能力都没有的人”。怕被BS，这里小写一个拖放效果练习一下。。。这里贴出代码：

js/move.js 文件

//将一个绝对定位的对象封装成可拖动对象
function MoveControl(c){
    /* 考虑浏览器兼容性，这里编写一个获取事件对象的公共方法 */
    c.getEvent=function(e){ 
        if(!e){ 
            e=event; 
            e.pageX=event.x; 
            e.pageY=event.y;
        } 
        return e; 
    }
    /* 当鼠标在该对象上按下，记录按下时鼠标的位置，并且修改监听锁，开始监听 */
    c.onmousedown=function(e){ 
        e=this.getEvent(e); 
        this.IX=e.pageX; 
        this.IY=e.pageY; 
        this.moveKey=true; 
    }
    /* 当鼠标在对象上移动时，同时移动该对象 */
    c.onmousemove=function(e){ 
        if(!this.moveKey) return; 
        
        e=this.getEvent(e); 
        this.style.top=parseInt(this.style.top?this.style.top:0)+(e.pageY-this.IY)+"px";
        this.style.left=parseInt(this.style.left?this.style.left:0)+(e.pageX-this.IX)+"px"; 
        this.IX=e.pageX; 
        this.IY=e.pageY; 
    }
    /* 当鼠标在对象上松开时，停止移动该对象 */
    c.onmouseup=function(e){ 
        this.moveKey=false; 
    }
}

HTML文件 child.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<script src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
    var d = document.getElementById("d");
    MoveControl(d);
}
</script>
</head>
<body>

<div id="d" style="width:100px; height:100px; background:#555; position:fixed;"></div>

</body>
</html>