本章节讲述的是拖动事件。具体看下面的代码
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坐标。
时间： 2024-12-17 16:55:22