详解鼠标拖拽
拖拽：小方块跟着鼠标拖拽走。
原理：1.先计算出鼠标按下的点距小方块左边缘与上边缘的距离，这是一个固定的值。而这个值也很好计算：用 当前鼠标的坐标 - 当前小木块的offsetLeft/offsetTop
2.确定出这个固定距离，每次鼠标移动会产生新的距离，使小方块的定位left，top为鼠标当前的距离 - 上一步计算好的固定距离即可。
3.控制小方块可移动的范围：设置变量l，h来存放小方块的实际left，top距离，对l,h做相应的控制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var tarX=0;
var tarY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
tarX=oEvent.clientX - oDiv.offsetLeft ;
tarY=oEvent.clientY - oDiv.offsetTop ;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX- tarX;
var t=oEvent.clientY- tarY;
if(l<0)
{
l=0;
}
else if(l>(document.documentElement.clientWidth- oDiv.offsetWidth))
{
l=document.documentElement.clientWidth- oDiv.offsetWidth;
}
if (t<0) {
t=0;
}
else if(t>(document.documentElement.clientHeight- oDiv.offsetHeight))
{
t=document.documentElement.clientHeight- oDiv.offsetHeight;
}
oDiv.style.left=l + 'px' ;
oDiv.style.top= t+'px' ;
}
oDiv.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
};
</script>
</body>
</html>
注意：防止鼠标移动过快脱离小木块，在移动过程中（onmousemove）使用全局对象document。
延伸：在父级范围内的拖拽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#div2{
width: 300px;
height: 200px;
background-color:#ccc;
position: relative;
}
</style>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var tarX=0;
var tarY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
tarX=oEvent.clientX - oDiv.offsetLeft ;
tarY=oEvent.clientY - oDiv.offsetTop ;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX- tarX;
var t=oEvent.clientY- tarY;
if(l<0)
{
l=0;
}
else if(l>(oDiv2.offsetWidth- oDiv.offsetWidth))
{
l=oDiv2.offsetWidth- oDiv.offsetWidth;
}
if (t<0) {
t=0;
}
else if(t>(oDiv2.offsetHeight- oDiv.offsetHeight))
{
t=oDiv2.offsetHeight- oDiv.offsetHeight;
}
oDiv.style.left=l + 'px' ;
oDiv.style.top= t+'px' ;
}
return false;
}
oDiv.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
</script>
</body>
</html>
注意：父级的position为relative
例：拖拽的磁性吸附：
原理：当小方块的边距小于一定像素时，直接将他的边距给定为吸附的边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#div2{
width: 700px;
height: 500px;
background-color:#ccc;
position: relative;
}
</style>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var tarX=0;
var tarY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
tarX=oEvent.clientX - oDiv.offsetLeft ;
tarY=oEvent.clientY - oDiv.offsetTop ;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX- tarX;
var t=oEvent.clientY- tarY;
if(l<50)
{
l=0;
}
else if(l>(oDiv2.offsetWidth- oDiv.offsetWidth))
{
l=oDiv2.offsetWidth- oDiv.offsetWidth;
}
if (t<50) {
t=0;
}
else if(t>(oDiv2.offsetHeight- oDiv.offsetHeight))
{
t=oDiv2.offsetHeight- oDiv.offsetHeight;
}
oDiv.style.left=l + 'px' ;
oDiv.style.top= t+'px' ;
}
return false;
}
oDiv.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
</script>
</body>
</html>
例：带框拖拽
当鼠标点击按下时，会有一个框出来，拖动框，直到鼠标松开，原小方块直接到框的位置。
原理：结合DOM，创建一个div，给他设置与小方块相同的宽高，添加给body，控制框的移动，当鼠标松开时，这个div节点被remove掉，把小方块的left，top设置成最终松开时的值即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带框拖拽</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.box{
border: 1px dashed black;
position: absolute;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var tarX=0;
var tarY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
tarX=oEvent.clientX - oDiv.offsetLeft ;
tarY=oEvent.clientY - oDiv.offsetTop ;
var oBox=document.createElement('div');
oBox.className='box';
oBox.style.width=oDiv.offsetWidth-2 +'px' ;
oBox.style.height=oDiv.offsetHeight-2 +'px';
oBox.style.left=oDiv.offsetLeft+'px';
oBox.style.top=oDiv.offsetTop+'px';
document.body.appendChild(oBox);
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX- tarX;
var t=oEvent.clientY- tarY;
if(l<0)
{
l=0;
}
else if(l>(document.documentElement.clientWidth- oDiv.offsetWidth))
{
l=document.documentElement.clientWidth- oDiv.offsetWidth;
}
if (t<0) {
t=0;
}
else if(t>(document.documentElement.clientHeight- oDiv.offsetHeight))
{
t=document.documentElement.clientHeight- oDiv.offsetHeight;
}
oBox.style.left=l + 'px' ;
oBox.style.top= t+'px' ;
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
oDiv.style.left=oBox.offsetLeft+'px';
oDiv.style.top=oBox.offsetTop+'px';
document.body.removeChild(oBox);
}
return false;
}
};
</script>
</body>
</html>
注意：
oBox.style.width=oDiv.offsetWidth-2 +'px' ;
oBox.style.height=oDiv.offsetHeight-2 +'px';
要使框与小方块一样大小，则减去占用像素的border值
