<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
.box{
position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:0px;top:0px;left:20px;
/*修饰*/
border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);
}
#box1{
position:absolute;width:100px;height:100px;background-color:#FF6E3D;left:200px;top:200px;left:20px;
/*修饰*/
border-radius:50%;box-shadow: 5px 5px 15px rgba(42,56,123,0.5);
}
</style>
</head> <body> <div class="box"></div>
<div id="box1"></div>
</body>
<script type="text/javascript">
//@zijian 2015/8/11
function Drag(id){
this.obj = document.getElementById(id)||document.getElementsByClassName(id)[0];//class or ID
this.disX = 0;
this.disY = 0;//Initialization parameters } Drag.prototype.init = function (){
var that = this;
this.obj.onmousedown = function (e){
var e = e || event;
that.mouseDown(e);
// Prevent the default event
return false;
};
}; // as the event is mouse
Drag.prototype.mouseDown = function (e){
var that = this;
this.disX = e.clientX - this.obj.offsetLeft; //Get mouse parameters for start
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){
this.obj.style.left = (e.clientX - this.disX) + 'px'; //Get mouse parameters for end
this.obj.style.top = (e.clientY - this.disY) + 'px';
}; Drag.prototype.mouseUp = function (){
document.onmousemove = null;
document.onmouseup = null; //mouse leave status
}; var drag = new Drag('box');
drag.init(); var drag1 = new Drag('box1');
drag1.init();
</script>
</html>