Movable Element

by Lazaro Contreras

HTML

<img ondragstart="return false;" ondrop="return false;" src="http://jsfiddle.net/img/logo.png"/>

JavaScript

var obj = document.querySelector('img');
var mouseY, mouseX;

obj.addEventListener('mousedown', function(e){
  mouseY = e.pageY - obj.offsetTop;
  mouseX = e.pageX - obj.offsetLeft;
 	window.addEventListener('mousemove', move);
 });
 window.addEventListener('mouseup',function(e){
 	window.removeEventListener('mousemove', move);
 });
 
 function move(e){
  obj.style.position = 'absolute';
  obj.style.top= e.pageY - mouseY + 'px';
  obj.style.left= e.pageX - mouseX + 'px';
}