<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 5px;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}
.box1 {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
cursor: pointer;
border-radius: 50%;
background-color: #FF6E3D;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div id="box1" class="box1"></div>
</body>
<script type="text/javascript">
function Drag(option) {
this.obj = option.obj;
this.mouseOffsetX = 0;
this.mouseOffsetY = 0;
this.parentWidth = option.parentWidth;
this.parentHeight = option.parentHeight;
this.init();
}
Drag.prototype = {
init: function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
}
},
mouseDown: function(e) {
var that = this;
this.mouseOffsetX = e.clientX - this.obj.offsetLeft;
this.mouseOffsetY = e.clientY - this.obj.offsetTop;
document.onmousemove = function(e) {
var e = e || window.event;
that.mouseMove(e);
};
document.onmouseup = function() {
that.mouseUp();
}
},
mouseMove: function(e) {
var moveX = e.clientX - this.mouseOffsetX,
moveY = e.clientY - this.mouseOffsetY,
maxX = this.parentWidth - this.obj.offsetWidth,
maxY = this.parentHeight - this.obj.offsetHeight;
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
this.obj.style.left = moveX + ‘px‘;
this.obj.style.top = moveY + ‘px‘;
},
mouseUp: function() {
document.onmousemove = null;
document.onmouseup = null;
}
}
Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
return false;
};
};
var drag = new Drag({
obj: document.getElementById("box"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});
var drag = new Drag({
obj: document.getElementById("box1"),
parentWidth: document.documentElement.clientWidth,
parentHeight: document.documentElement.clientHeight
});
</script>
</html>
原文：http://www.cnblogs.com/mouse2417/p/5570909.html