什么是拖拽
拖拽就是在某一个对象上，当鼠标按下去之后，拖着对象走，松开鼠标时，对象位置变成拖拽的位置
简单拖拽
1.实现简单的拖拽功能
2.当拖拽对象到网页边缘时，会停留在边缘
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: #8A2BE2;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var oDiv=document.getElementById("box");
var disX=0;
var disY=0;
oDiv.onmousedown=function(e){
var oEvent =e||event;
//鼠标距离在div中距离div左端和顶端的距离
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//将鼠标移动事件都加在document上,防止鼠标走出div
document.onmousemove=function(e){
var oEvent =e||event;
//div相对鼠标移动的左端距离和顶端距离
var l=oEvent.clientX-disX;
var t =oEvent.clientY-disY;
//判断div是否移处可视页面的边缘
if(l<0){
l=0;
}
//documentElement.clientWidth:可视区的宽度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0){
t=0;
}
//documentElement.clientHeight:可视区的高度
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
//设置div相对鼠标的距离
oDiv.style.left=l +"px";
oDiv.style.top=t+"px";
};
//鼠标松开之后将对象释放
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
</script>
</body>
</html>
实现效果
完美拖拽_吸附
1.在实现简单拖拽的基础上给拖拽对象一个区域范围
2.拖拽吸附：在靠近父级边缘时自动吸附在父级边缘
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box0 {
width: 700px;
height: 500px;
background: lightgreen;
position: relative;
margin: 10px auto;
}
#box {
width: 100px;
height: 100px;
background: #8A2BE2;
position: absolute;
}
</style>
</head>
<body>
<div id="box0">
<div id="box"></div>
</div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
var oDiv0 = document.getElementById("box0");
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(e) {
var oEvent = e || event;
//鼠标距离在div中距离div左端和顶端的距离
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
//将鼠标移动事件都加在document上,防止鼠标走出div
// 判断兼容问题
if (oDiv.setCapture) {
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
//iE8一下对拖拽会有不兼容,所以要用到捕获
//设定一个捕获:将所有的事件全部放在oDiv上
oDiv.setCapture();
return false; //足以解决chorm ff IE9的问题
} else {
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
//iE8一下对拖拽会有不兼容,所以要用到捕获
//设定一个捕获:将所有的事件全部放在oDiv上
// oDiv.setCapture();
return false; //足以解决chorm ff IE9的问题
}
}
function mouseMove(e) {
var oEvent = e || event;
//div相对鼠标移动的左端距离和顶端距离
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
//判断div是否移处可视页面的边缘
//拖拽靠近父级边缘时自动吸附
if (l < 50) {
l = 0;
}
//documentElement.clientWidth:可视区的宽度
else if (l > oDiv0.offsetWidth - oDiv.offsetWidth) {
l = oDiv0.offsetWidth - oDiv.offsetWidth;
}
if (t < 50) {
t = 0;
}
//documentElement.clientHeight:可视区的高度
else if (t > oDiv0.offsetHeight - oDiv.offsetHeight) {
t = oDiv0.offsetHeight - oDiv.offsetHeight;
}
//设置div相对鼠标的距离
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
};
function mouseUp(e) {
this.onmousemove = null;
this.onmouseup = null;
//鼠标松开时,释放捕获
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
}
</script>
</body>
</html>
实现效果
带框拖拽
带框拖拽是拖拽的另一种形式，拖动时，跟着移动的是对象的虚线框，虚线框就是对象将要拖移到达的位置
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box0 {
width: 700px;
height: 500px;
background: lightgreen;
position: relative;
margin: 10px auto;
}
#box {
width: 100px;
height: 100px;
background: #8A2BE2;
position: absolute;
}
/* 虚线框 */
.box1 {
border: #000000 1px dashed;
position: absolute;
}
</style>
</head>
<body>
<div id="box0">
<div id="box"></div>
</div>
<script type="text/javascript">
var oDiv = document.getElementById("box");
var oDiv0 = document.getElementById("box0");
var disX = 0;
var disY = 0;
oDiv.onmousedown = function(e) {
var oEvent = e || event;
//鼠标距离在div中距离div左端和顶端的距离
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
//没有用var声明的变量就是全局变量
oBox=document.createElement('div');
oBox.className='box1';
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";
oDiv0.appendChild(oBox);
// 判断兼容问题
if (oDiv.setCapture) {
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
//iE8一下对拖拽会有不兼容,所以要用到捕获
//设定一个捕获:将所有的事件全部放在oDiv上
oDiv.setCapture();
return false; //足以解决chorm ff IE9的问题
} else {
//将鼠标移动事件都加在document上,防止鼠标走出div
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
//iE8一下对拖拽会有不兼容,所以要用到捕获
//设定一个捕获:将所有的事件全部放在oDiv上
// oDiv.setCapture();
return false; //足以解决chorm ff IE9的问题
}
}
function mouseMove(e) {
var oEvent = e || event;
//div相对鼠标移动的左端距离和顶端距离
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
//判断div是否移处可视页面的边缘
//拖拽靠近父级边缘时自动吸附
if (l < 50) {
l = 0;
}
//documentElement.clientWidth:可视区的宽度
else if (l > oDiv0.offsetWidth - oDiv.offsetWidth) {
l = oDiv0.offsetWidth - oDiv.offsetWidth;
}
if (t < 50) {
t = 0;
}
//documentElement.clientHeight:可视区的高度
else if (t > oDiv0.offsetHeight - oDiv.offsetHeight) {
t = oDiv0.offsetHeight - oDiv.offsetHeight;
}
//设置div相对鼠标的距离
oBox.style.left = l + "px";
oBox.style.top = t + "px";
};
function mouseUp(e) {
this.onmousemove = null;
this.onmouseup = null;
//鼠标松开时,释放捕获
if (oDiv.releaseCapture) {
oDiv.releaseCapture();
}
//鼠标松开的时候虚线框消失
oDiv.style.left=oBox.offsetLeft+"px";
oDiv.style.top=oBox.offsetTop+"px";
oDiv0.removeChild(oBox);
}
</script>
</body>
</html>
实现效果
自定义滚动条
自定义滚动条是利用拖拽的功能实现滚动条的功能
下面的案例实现了
1.利用自定义滚动条改变div的大小
2.利用自定义滚动条改变div的透明度
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#parent1 {
width: 500px;
height: 20px;
background: #CCCCCC;
position: relative;
margin: 10px auto;
display: inline-block;
top: 12px;
left: 50px;
}
#div1 {
width: 20px;
height: 20px;
position: absolute;
background: #8A2BE2;
right: 0px;
top: 0;
}
#parent2 {
width: 500px;
height: 20px;
background: #CCCCCC;
position: relative;
margin: 10px auto;
display: inline-block;
top: 12px;
left: 33px;
}
#div2 {
width: 20px;
height: 20px;
position: absolute;
background: #ADFF2F;
right: 0;
top: 0;
}
#div0 {
width: 400px;
height: 400px;
/* 兼容 */
filter: alpha(opacity:100);
opacity: 1;
background-color: darkorange;
margin: 20px auto;
}
</style>
</head>
<body>
改变大小：
<div id="parent1">
<div id="div1"></div>
</div><br>
改变透明度：
<div id="parent2">
<div id="div2"></div>
</div>
<div id="div0">
</div>
<script type="text/javascript">
var oDiv1 = document.getElementById("div1");
var oDiv0 = document.getElementById("div0");
var oDiv2 = document.getElementById("div2");
var oParent1 = document.getElementById("parent1");
var oParent2 = document.getElementById("parent2");
var disX = 0;
oDiv1.onmousedown = function(e) {
var oEvent = e || event;
//鼠标距离在div中距离div左端和顶端的距离
disX = oEvent.clientX - oDiv1.offsetLeft;
//将鼠标移动事件都加在document上,防止鼠标走出div
document.onmousemove = function(e) {
var oEvent = e || event;
//div相对鼠标移动的左端距离和顶端距离
var l = oEvent.clientX - disX;
//判断div是否移处可视页面的边缘
if (l < 0) {
l = 0;
}
//documentElement.clientWidth:可视区的宽度
else if (l > oParent1.offsetWidth - oDiv1.offsetWidth) {
l = oParent1.offsetWidth - oDiv1.offsetWidth;
}
//设置div相对鼠标的距离
oDiv1.style.left = l + "px";
var scale = l / (oParent1.offsetWidth - oDiv1.offsetWidth);
//改变oDiv2的大小
oDiv0.style.width = 400 * scale + "px";
oDiv0.style.height = 400 * scale + "px";
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
oDiv2.onmousedown = function(e) {
var oEvent = e || event;
//鼠标距离在div中距离div左端和顶端的距离
disX = oEvent.clientX - oDiv2.offsetLeft;
//将鼠标移动事件都加在document上,防止鼠标走出div
document.onmousemove = function(e) {
var oEvent = e || event;
//div相对鼠标移动的左端距离和顶端距离
var l = oEvent.clientX - disX;
//判断div是否移处可视页面的边缘
if (l < 0) {
l = 0;
}
//documentElement.clientWidth:可视区的宽度
else if (l > oParent2.offsetWidth - oDiv2.offsetWidth) {
l = oParent2.offsetWidth - oDiv2.offsetWidth;
}
//设置div相对鼠标的距离
oDiv2.style.left = l + "px";
var scale = l / (oParent2.offsetWidth - oDiv2.offsetWidth);
//改变oDiv2的透明度
oDiv0.style.opacity = scale;
oDiv0.style.filter = "alpha(opacity:" + scale * 100 + ")";
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
</script>
</body>
</html>
实现效果
（ps：本次学习就到这里，喜欢的话点赞关注哦 ^ _ ^ ）
