Scribd Logo
Upload

Welcome to Scribd!

  • Move Images

    Uploaded by

    xdanradu9499
    7 views1 page
    Drag and drop images with javascript.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Drag and drop images with javascript.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views1 page

    Move Images

    Uploaded by

    xdanradu9499
    Drag and drop images with javascript.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    <!DOCTYPE html> <html> <head> <style type='text/css'> img { position: absolute; } </style> <script type='text/javascript'> window.

    onload = function() { movMeId = document.getElementById("ImgMov"); movMeId.style.top = "40px"; movMeId.style.left = "40px"; document.onmousedown = coordinates; document.onmouseup = mouseup; function coordinates(e) { if (e == null) { e = window.event;} // e.srcElement holds the target element in IE, whereas e.target holds the t arget element in Firefox // Both properties return the HTML element the event took place on. var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.tar get; if (sender.id=="ImgMov") { mouseover = true; pleft = parseInt(movMeId.style.left); ptop = parseInt(movMeId.style.top); xcoor = e.clientX; ycoor = e.clientY; document.onmousemove = moveImage; return false; } else { return false; } } function moveImage(e) { if (e == null) { e = window.event; } movMeId.style.left = pleft+e.clientX-xcoor+"px"; movMeId.style.top = ptop+e.clientY-ycoor+"px"; return false; } function mouseup(e) { document.onmousemove = null; } } </script> </head> <body> <img id="ImgMov" src="earth.png" width="64" height="64" /> <p>Drag and drop around the image in this page.</p> </body> </html>

    You might also like