Drag and Drop 2 | JavaScriptSource

Drag and Drop 2

JavaScriptSource Staff May 6, 2005

General

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!




Notes

Source Code

Paste this source code into the designated areas.

External file

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


CSS

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


Head

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


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(17 comments)

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

See comment #1.

Lee Nov 6, 2007