Navigation Menu

What's New?
Alphabetical Listing
Site Contents


Site FAQ
About JSS
JavaScript Forum
JavaScript Tutorial
Friends of JSS

Link to Us
JavaScript Help
Contribute a script
Technology Jobs

Become a Partner

Internet.commerce

Be a Commerce Partner














Internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Developer Channel

FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!


Hiermenus Central


Promotions

Free Announcements


Social Bookmark

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


User Comments

Add a comment, suggestion, or correction
[For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]

    
   
       
[optional]
 
[optional]

   

Comments feed Comment Feed RSS 2.0

17. From: davinder
Drag & Drop codes
03/11/2008 00:34:31

hi Lou,

mind blowing codes, these are gonna help me in future and that's a very good R&D for me. Thank you so much.

Regards
Davinder Kumar

14. From: Greg Tillotson
Drag & Drop w/Link
01/08/2008 16:48:12

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?

15. From: Lee Underwood (Admin)
01/29/2008 12:36:49

Due to the limitations of these comments, you will need to submit your question to the JavaScript Forum for further help.

16. From: Johan
reply scrollbug
01/01/2008 07:04:00

I fixed the scrollingbug with this:

in the js-code:
if (navigator.appName!="Microsoft Internet Explorer")
document.onmousedown=selectmouse;

and in the <img>-tag:
onMouseDown="selectmouse()"

Not so beautyful because I am quite new in js, but it works great ;)

13. From: jason
10/12/2007 15:37:51

It only works for me if I do not have a doctype defined

10. From: Sanjeev Chak
Great Script
10/04/2007 01:56:25

Its working
its helpful for me.

9. From: Vivek
Very good it's helped me!!
09/19/2007 10:08:22

Good to see such a simple example yet effective example.

Bye
Vivek

11. From: harmi prasetyo
09/15/2007 11:24:05

how to make this running on the mozilla firefox

12. From: Lee (Admin)
11/06/2007 11:28:49

See comment #1.

7. From: bob
08/02/2007 18:20:53

It doesn't work! You can drag but not drop.

next comments...

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.