事件-拖动事件

本章节讲述的是拖动事件。具体看下面的代码

drag.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="drag.js" type="text/javascript"></script>
    <link href="drag.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="div1" class="div1">
    <div id="div2" class="div2"></div>
    <div id="div3" class="div3"></div>
</div>
</body>
</html>

drag.css

.div1{
    width:500px;
    height:400px;
    border:1px solid  #eeddcc;
    margin:0 auto;
    background-color: antiquewhite;
    position:absolute;//我们是为了移动div1块,所以div1必须要设置成定位的,且这里一定要设置成绝对定位,如果设置成相对定位的话,会有效果差异。

}
.div2{
    width:300px;
    height:100px;
    margin:0 auto;
    background-color: red;
}
.div3{
    width:50px;
    height:50px;
    background-color: aqua;
    position:absolute;
    top:5px;
    right:5px;
}

drag.js

function getByCls(targetname,parentId){
    var Oprent=parentId? document.getElementById(parentId):document,
    els=[];
    var element=Oprent.getElementsByTagName("*");
    for(var i= 0,l=element.length;i<l;i++){
        if(element[i].className==targetname){
            els.push(element[i]);
        }
    }
    return els;

}//一般我们会设置元素的类选择器,所以我们这里自定义一个通过类选择器来获取元素的函数
window.onload=drag;
function drag(){
    var div1=getByCls("div2","div1")[0];//此处一定要注意,后面一定要加上[0],因为我们获取的是一个数组,我们必须获得其中的某一个来操作。
    div1.onmousedown=eventdown;
    div1.onmouseup=eventup;
}
function eventup(){
    document.onmousemove=null;
    div1.onmouseup=null;
}
function eventdown(event){
    var div1=document.getElementById("div1");
    var event=event||window.event;//这个方法是兼容event事件的
    var posX=event.clientX-div1.offsetLeft;
    var posY=event.clientY-div1.offsetTop;//我们可以通过event.clientX, event.clientY的方式获取鼠标的位置坐标。对于div块我们可以通过object.offsetLeft获得他的左上角的X坐标,object.offsetTop获取它的左上角的Y坐标。
document.onmousemove=function(event){ var event=event||window.event; moveEvent(event,posX,posY);
} } function moveEvent(event,posX,posY){ var event=event||window.event; var div1=document.getElementById("div1"); var WinWidth=document.documentElement.clientWidth||document.body.clientWidth; var WinHeight=document.documentElement.clientHeight||document.body.clientHeight;//这个方法是获取屏幕大小的方法,这处考虑到了兼容问题 var MaxW=WinWidth-div1.offsetWidth; var MaxH=WinHeight-div1.offsetHeight; var disX=event.clientX-posX; var disY=event.clientY-posY; if(disX<0){ disX=0; }else if(disX>MaxW){ disX=MaxW; } if(disY<0){ disY=0; }else if(disY>MaxH){ disY=MaxH; } div1.style.left=disX+"px";//注意此处后面一定要加"px"; div1.style.top=disY+"px"; }

总结一下,首先我们可以自定义一个通过类选择器获得元素的方法,事实上已经有函数了Object.getElementByclassName(),但是兼容性不是很好。

其次我们上述通过自定义函数获取的是一个数组,所以我们在上面后面加上了[0],这个千万不要丢呀!!!

其次我们来总结一下几种获取位置坐标,宽度的方法

首先,获取鼠标的坐标的方法:event.clientX, event.clientY;

获取div块的左上角坐标的方法:object.offsetLeft,  object.offsetTop;获取div块宽,长度的方法:object.offsetWidth,object.offsetHeight;

获取屏幕大小的方法:document.documentElement.clientWidth||document.body.clientWidth,  document.documentElement.clientHeight||document.body.clientHeight;

最后,如果我们想移动某个元素的话,那么这个元素一定要设置成定位的,且最好是绝对定位的。然后我们在设置它的left,top值时千万不要丢了在后面加上"px".

//我们可以通过event.clientX, event.clientY的方式获取鼠标的位置坐标。对于div块我们可以通过object.offsetLeft获得他的左上角的X坐标,object.offsetTop获取它的左上角的Y坐标。
posted @ 2016-01-06 20:38  秋天的故事  阅读(192)  评论(0编辑  收藏  举报