console
window.onload = function(){
var initMouseX = 0;
var initMouseY = 0;
var initObjX = 0;
var initObjY = 0;
var isDraging = false;
function g(id){
return document.getElementById(id);
}
function eventHandler(elem, eventName, eventType){
elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);
};
function getStyleValue(elem, property){
return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];
}
function setObjPos(elem, pos){
elem.style.left = pos.x +'px';
elem.style.top = pos.y +'px';
}
eventHandler(g('box'), function(event){
initMouseX = event.clientX;
initMouseY = event.clientY;
initObjX = parseInt(getStyleValue(g('box'), 'left'));
initObjY = parseInt(getStyleValue(g('box'), 'top'));
isDraging = true;
},'mousedown');
eventHandler(g('box'), function(event){
if(isDraging){
var moveX = event.clientX - initMouseX + initObjX;
var moveY = event.clientY - initMouseY + initObjY;
setObjPos(g('box'), {x:moveX, y:moveY});
}
},'mousemove');
eventHandler(document.documentElement, function(event){
isDraging = false;
},'mouseup');
}
<div class="box" id="box" style="position: absolute;left: 25px;top: 25px;"></div>
body {
margin: 0;
padding: 0;
position: relative;
}
.box {
width: 100px;
height: 100px;
background: deeppink;
position: absolute;
left: 25px;
top: 25px;
cursor: move;
}