Navigation Menu

Site Contents
What's New?


Site FAQ
About JSS
JavaScript Forum
JavaScript Tutorial
Friends of JSS

Link to Us
JavaScript Help
Contribute a script
Technology Jobs

Internet.commerce

Partner With Us
Hurricane Shutters
Corporate Awards
Prepaid Phone Card
Online Education
Shop Online
Web Design
Auto Insurance Quote
Boat Donations
KVM Switch over IP
Home Improvement
Promotional Golf
Online Education
Phone Cards
Server Racks

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


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]

    
   
       
[optional field]
 
[optional field]

   

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.