html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>divDrag</title>
<style>
#div1{
300px;
height: 300px;
background-color: #ccc;
/*一定要绝对定位*/
position: absolute;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
<script src="drag.js"></script>
</body>
</html>
//js面向过程式写法
window.onload = function(){
var div1 = document.getElementById("div1");
div1.onmousedown = function(ev){
var oevent = ev || event;
var distanceX = oevent.clientX - div1.offsetLeft;
var distanceY = oevent.clientY - div1.offsetTop;
document.onmousemove = function(ev){
var oevent = ev || event;
div1.style.left = oevent.clientX - distanceX + 'px';
div1.style.top = oevent.clientY - distanceY + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
;
};
jquery
$('.box').mousedown(function(ev) {
var oevent = ev || event;
var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;
$(document).mousemove(function(ev) {
var oevent = ev || event;
$('.box').css('left', oevent.clientX - distanceX + 'px');
$('.box').css('top', oevent.clientY - distanceY + 'px');
});
$(document).mouseup(function(ev) {
$(document).unbind('mousemove');
$(document).unbind('mouseup');
});
})