Drag and Drop 2 | JavaScriptSource

Drag and Drop 2

JavaScriptSource Staff May 6, 2005


Using a combination of CSS and JavaScript, you can move your images all over the page. Just add the class tag to the link's attributes - it's that simple!


Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: dragAndDrop.js


Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document

Leave a Response


Thank you for posting the great content.I was looking for something like this.I found it quiet interesting, hopefully you will keep posting such blogs..Keep sharing. http://www.kizi2.com

kizi May 31, 2012

hi Lou,[br /][br /]mind blowing codes, these are gonna help me in future and that's a very good R&D for me. Thank you so much.[br /][br /]Regards[br /]Davinder Kumar

davinder Mar 10, 2008

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Underwood Jan 29, 2008

When the image is has an href, on mouseup, the href is followed. How can this be prevented so that the image still holds the href, but it is not followed during a drag and drop?

Greg Tillotson Jan 8, 2008

I fixed the scrollingbug with this:[br /][br /]in the js-code:[br /]if (navigator.appName!="Microsoft Internet Explorer")[br /]document.onmousedown=selectmouse;[br /][br /]and in the <img>-tag:[br /]onMouseDown="selectmouse()"[br /][br /]Not so beautyful because I am quite new in js, but it works great ;)

Johan Jan 1, 2008