<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>拖拽js</title>
<style type="text/css">
html,
body {
overflow: hidden;
}
body,
div,
{
margin: 0;
padding: 0;
}
body {
color: #fff;
font: 12px/2 Arial;
}
p {
padding: 0 10px;
margin-top: 10px;
}
span {
color: #ff0;
padding-left: 5px;
}
#box {
position: absolute;
300px;
height: 150px;
background: #D5CDDA;
border: 2px solid #ccc;
top: 150px;
left: 400px;
margin: 0;
}
#drag {
height: 25px;
cursor: move;
background: #724a88;
border-bottom: 2px solid #ccc;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="box">
<div id="drag">拖动区域</div>
被拖动的整个div
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
moveBox($("#box"), $("#drag"));
})
//B被拖动的div，BT可拖动区域
function moveBox(B, BT) {
var bDrag = false;
var _x, _y;
BT.mousedown(function(event) {
var e = event || window.event;
bDrag = true;
_x = e.pageX - B.position().left;
_y = e.pageY - B.position().top;
return false
})
$(document).mousemove(function(event) {
if(!bDrag) return false;
var e = event || window.event;
var x = e.pageX - _x;
var y = e.pageY - _y;
console.log(B.position());
var maxL = $(document).width() - B.outerWidth();
var maxT = $(document).height() - B.outerHeight();
x = x < 0 ? 0 : x;
x = x > maxL ? maxL : x;
y = y < 0 ? 0 : y;
y = y > maxT ? maxT : y;
B.css({
left: x,
top: y
});
return false
}).mouseup(function() {
bDrag = false;
return false
})
}
</script>