要求:div用鼠标点击拖动,松开鼠标div放开(保持兼容)
这里说一个注意点,谷歌浏览器的scrollTop的获取现在也只能通过html元素了,之前是只能通过body的!
原生JS和jQuery方法
原生JS方法一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div拖放</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #e74c3c;
position: absolute;
}
</style>
<script>
window.onload = function(){
var div = document.getElementById('box');
div.onmousedown = function(event){
div.style.cursor = 'move';
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var ol = pageX - div.offsetLeft;
var ot = pageY - div.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var targetX = pageX - ol;
var targetY = pageY - ot;
div.style.left = targetX + 'px';
div.style.top = targetY + 'px';
}
//这里要使用document来绑定鼠标松开事件,比如在当前div下还设置了
//一个div,如果当前这个div移动到下面这个蓝色的div上时,
//鼠标松开是没有用的,因为此时鼠标是在蓝色div上,而不是在当前div上。
document.onmouseup = function(){
document.onmousemove = null;
div.style.cursor = 'default';
}
}
}
</script>
</head>
<body style="width: 2000px;height: 2000px">
<div id="box"></div>
<div style="width: 100px;height: 100px;margin-left: 1000px;background-color: blue;"></div>
</body>
</html>
原生JS方法二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div拖放</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #e74c3c;
position: absolute;
}
</style>
<script>
window.onload = function(){
var div = document.getElementById('box');
var ol, ot;
var flag = false;
div.onmousedown = function(event){
div.style.cursor = 'move';
flag = true;
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
ol = pageX - div.offsetLeft;
ot = pageY - div.offsetTop;
}
document.onmousemove = function(event){
if(flag == false){
return;
}
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var targetX = pageX - ol;
var targetY = pageY - ot;
div.style.left = targetX + 'px';
div.style.top = targetY + 'px';
}
document.onmouseup = function(){
flag = false;
div.style.cursor = 'default';
}
}
</script>
</head>
<body style="width: 2000px;height: 2000px">
<div id="box"></div>
</body>
</html>
jQuery方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div拖放</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #e74c3c;
position: absolute;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var targetX, targetY;
var isDown = false;
$("#box").mousedown(function(event){
isDown = true;
var event = event || window.event;
var pageX = event.pageX || event.clientX + $(document).scrollLeft();
var pageY = event.pageY || event.clientY + $(document).scrollTop();
targetX = pageX - $("#box").offset().left;
targetY = pageY - $("#box").offset().top;
$(this).css({cursor:"move"});
});
$(document).mousemove(function(event){
if(isDown){
var event = event || window.event;
var pageX = event.pageX || event.clientX + $(document).scrollLeft();
var pageY = event.pageY || event.clientY + $(document).scrollTop();
var left = pageX - targetX;
var top = pageY - targetY;
$("#box").css({
left:left,
top:top
});
}
}).mouseup(function(){
isDown = false;
$("#box").css({cursor:"default"});
});
});
</script>
</head>
<body style="width: 2000px;height: 2000px;">
<div id="box"></div>
</body>
</html>