<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#box {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF6E3D;
left: 0px;
top: 0px;
border-radius: 50%;
box-shadow: 5px 5px 15px rgba(42, 56, 123, 0.5);
}
#box span {
width: 6px;
height: 24px;
display: block;
float: left;
margin-top: 13px;
margin-left: 3px;
border-radius: 5px;
background: green;
}
#box span:first-child {
margin-left: 14px;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<span></span>
<span></span>
</div>
</body>
<scrip src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function Drag(id) {
this.obj = document.getElementById(id) || document.getElementsByClassName(id)[0];
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init = function() {
var that = this;
this.obj.onmousedown = function(e) {
var e = e || window.event;
that.mouseDown(e);
return false;
};
};
Drag.prototype.mouseDown = function(e) {
var that = this;
this.disX = e.clientX - this.obj.offsetLeft;
//this.disY = e.clientY - this.obj.offsetTop;
document.onmousemove = function(e) {
var e = e || window.event;
that.mouseMove(e);
};
document.onmouseup = function() {
that.mouseUp();
}
};
Drag.prototype.mouseMove = function(e) {
var temp = e.clientX - this.disX
this.obj.style.left = (e.clientX - this.disX) + 'px';
if( temp > 500){
this.obj.style.left = '500px';
that.mouseUp();
}else if( temp < 0){
this.obj.style.left = "0px";
that.mouseUp();
}
console.log(temp);
//this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function() {
document.onmousemove = null;
document.onmouseup = null;
};
var drag = new Drag('box');
drag.init();
</script>
</html>