Move Images using Javascript

calendar January 5, 2010

Next javascript code shows how you can move images around the page.

Compatibility: Mozilla, Opera, Chrome, Safari

Code:

 var curElement;
 function doMouseMove(e)
 {
   var newleft = 0, newTop = 0;
   curElement.style.position = "absolute";
   if((e.which == 1) && (curElement != null))
   {
     newleft = e.screenX - (curElement.offsetWidth/2);
     curElement.style.left = newleft + "px";
     newtop = e.screenY - (curElement.offsetHeight/2);
    curElement.style.top = newtop + "px";
   }
 }

 function doDragStart(e)
 {
   // Don't do default drag operation.
   if ("IMG" == e.target.tagName)
   {
     e.returnValue = false;
   }  
 }

 function doMouseDown(e)
 {
   if ((e.which == 1) && (e.target.tagName == "IMG"))
   {
     curElement = e.target;
   }
 }

 function dropElem()
 {
   curElement = null;
 }    

 document.ondragstart = doDragStart;
 document.onmousedown = doMouseDown;
 document.onmousemove = doMouseMove;
 document.onmouseup   = dropElem;

To expirement with it create an HTML document and put the code in the head element, the body element must contains at least one img element, good luck.

admin Javascript

Leave a Reply

You must be logged in to post a comment.