>>>>>将元素和图片进行随意拖拽,并且考虑到兼容性,将浏览器的兼容问题也进行了解决。<<<<<
--------------只将一个元素div进行拖拽------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1{
width:200px;
height: 200px;
background-color: #00FFFF;
position: absolute;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 200px;
left: 300px;
}
</style>
<script>
/*总共有三个事件
--当鼠标按下时为onmousedown
--当鼠标移动时为onmousemove
--当鼠标松开时为onmouseup
*/
window.onload=function(){
var box1=document.getElementById("box1");
// 给box1绑定一个鼠标按下事件
box1.onmousedown=function(event){
// 鼠标的坐标-box1.offsetleft
//解决鼠标图标位置问题
var ol=event.clientX-box1.offsetLeft;
var ot=event.clientY-box1.offsetTop;
// 设置box1捕获所有鼠标按下的事件
// 但这个方法只有在IE8中使用,为了兼容性
// box1.setCapture();
/*判断一下浏览器中是否有这个方法
if(box1.setCapture){
box1.setCapture();
}
*/
// 这种写法方法比较简单
box1.setCapture && box1.setCapture();
// 给文本绑定一个鼠标移动事件
document.onmousemove=function(event){
evnet=event||window.event;
// 获取鼠标的坐标
var x=event.clientX - ol;
var y=event.clientY - ot;
// 获取box1的位置
box1.style.left=x+"px";
box1.style.top=y+"px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
// 在鼠标松下时消除所有捕获
// if(box1.releaseCapture){
// box1.releaseCapture();
// }
box1.releaseCapture && box1.releaseCapture();
};
// 清除默认样式
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
---->这里写了一个id为box2的div元素,为了更好的进行拖拽,若只给id为box1的div设置鼠标松开事件时,则如果box1和box2有重合时,因为有box2挡着,就不能再将box1进行拖拽,所以在代码中,将给box1设置的onmouseup事件,改成了给document设置onmouseup事件,这个问题就解决啦<--------
还有一个小细节,若鼠标在点击时,鼠标图标会自动跑到box1的左上角,代码中也有解决哦!
这张图片就是解决鼠标图标位置问题的原理图,黑色点表示鼠标的位置,根据鼠标的所在位置的横坐标clientX减去box1的左侧间距就等于box1的偏移量。
var ol=event.clientX-box1.offsetLeft;//横坐标
var ot=event.clientY-box1.offsetTop;//纵坐标
就是这两句代码的意思。
----------------若将多个元素以及图片进行随意拖拽时------------------
**只需要创建一个函数并进行传参就可以了,传入自己想到拖动的元素即可。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1{
width:200px;
height: 200px;
background-color: #00FFFF;
position: absolute;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 200px;
left: 300px;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var img1=document.getElementById("img1");
drag(box1);
drag(box2);
drag(img1);
};
// 当为多个元素设置拖动时
/*
创建一个函数
*/
function drag(ele){
ele.onmousedown=function(event){
var ol=event.clientX-ele.offsetLeft;
var ot=event.clientY-ele.offsetTop;
ele.setCapture && ele.setCapture();
// 给文本绑定一个鼠标移动事件
document.onmousemove=function(event){
evnet=event||window.event;
// 获取鼠标的坐标
var x=event.clientX - ol;
var y=event.clientY - ot;
ele.style.left=x+"px";
ele.style.top=y+"px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
ele.releaseCapture && ele.releaseCapture();
};
// 清除默认样式
return false;
};
}
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<!-- 一定要给图片要开启绝对定位 -->
<img src="img/2.jpg" id="img1" style="position: absolute;"/>
</body>
</html>
这样就可以随意拖拽这几个元素和图片啦!!
- 注意!!!-----在对图片进行拖拽时,一定要开启图片的绝对定位。