8/3/13
HTML5 Drag and Drop
Search w3schools.com: Select Language
HOME
HTML
C SS
JAVASC RIPT
JQUERY
XML
ASP.NET
PHP
SQL
MORE...
R EFER ENC ES
EXAMPLES
FO R UM
ABO UT
Get Certified
Study Web Technologies and get a diploma at w3schools.com
New Upcoming Projects
www.99acres.com/New_Projects 1/2/3/4 BHK Flats/Apts in ur Budget Search by Locality,Price,Amenities.
SHARE THIS PAGE
Like
76k
HTML Basic
HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Links HTML Head HTML CSS HTML Images HTML Tables HTML Lists HTML Blocks HTML Layout HTML Forms HTML Iframes HTML Colors HTML Colornames HTML Colorvalues HTML JavaScript HTML Entities HTML URL Encode HTML Quick List HTML Summary HTML XHTML
HTML5 Drag and Drop
Previous
Drag and drop is a part of the HTML5 standard.
WEB HOSTING
Next Chapter
Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email
WEB BUILDING
XML Editor - Free Trial!
Drag the W3Schools image into the rectangle.
FREE Website BUILDER FREE Website C reator Best Website Templates
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be draggable.
STATISTICS
Browser Statistics
Browser Support
OS Statistics Display Statistics
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support drag and drop. Note: Drag and drop does not work in Safari 5.1.2.
HTML5 Drag and Drop Example
The example below is a simple drag and drop example:
Example
< ! D O C T Y P EH T M L > < h t m l > < h e a d > < s c r i p t > f u n c t i o na l l o w D r o p ( e v ) { e v . p r e v e n t D e f a u l t ( ) ; } f u n c t i o nd r a g ( e v ) { e v . d a t a T r a n s f e r . s e t D a t a ( " T e x t " , e v . t a r g e t . i d ) ; } f u n c t i o nd r o p ( e v ) { e v . p r e v e n t D e f a u l t ( ) ; v a rd a t a = e v . d a t a T r a n s f e r . g e t D a t a ( " T e x t " ) ; e v . t a r g e t . a p p e n d C h i l d ( d o c u m e n t . g e t E l e m e n t B y I d ( d a t a ) ) ; } < / s c r i p t > < / h e a d > < b o d y > < d i vi d = " d i v 1 "o n d r o p = " d r o p ( e v e n t ) " o n d r a g o v e r = " a l l o w D r o p ( e v e n t ) " > < / d i v > < i m gi d = " d r a g 1 "s r c = " i m g _ l o g o . g i f "d r a g g a b l e = " t r u e " o n d r a g s t a r t = " d r a g ( e v e n t ) "w i d t h = " 3 3 6 "h e i g h t = " 6 9 " > < / b o d y > < / h t m l >
Try it yourself It might seem complicated, but lets go through all the different parts of a drag and drop event.
HTML5 News
HTML5 Intro HTML5 New Elements HTML5 Canvas HTML5 SVG HTML5 Drag/Drop HTML5 Geolocation HTML5 Video HTML5 Audio HTML5 Input Types HTML5 Form Elements HTML5 Form Attributes HTML5 Semantic HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE
HTML Media
HTML Media HTML Object HTML Audio HTML Video HTML YouTube
HTML Examples
HTML Examples HTML Quiz HTML5 Quiz HTML Certificate HTML5 Certificate
Make an Element Draggable
First of all: To make an element draggable, set the draggable attribute to true:
HTML References
HTML Tag List HTML Attributes
< i m gd r a g g a b l e = " t r u e " >
w3schools.com/html/html5_draganddrop.asp
1/3
8/3/13
HTML Events HTML Canvas HTML Audio/Video HTML Doctypes HTML Colornames HTML Colorpicker HTML Colormixer HTML Character Sets HTML ASCII HTML ISO-8859-1 HTML Symbols HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods Keyboard Shortcuts
HTML5 Drag and Drop
What to Drag - ondragstart and setData()
Then, specify what should happen when the element is dragged. In the example above, the ondragstart attribute calls a function, drag(event), that specifies what data to be dragged. The dataTransfer.setData() method sets the data type and the value of the dragged data:
f u n c t i o nd r a g ( e v ) { e v . d a t a T r a n s f e r . s e t D a t a ( " T e x t " , e v . t a r g e t . i d ) ; }
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").
Where to Drop - ondragover
The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event:
e v e n t . p r e v e n t D e f a u l t ( )
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs. In the example above, the ondrop attribute calls a function, drop(event):
f u n c t i o nd r o p ( e v ) { e v . p r e v e n t D e f a u l t ( ) ; v a rd a t a = e v . d a t a T r a n s f e r . g e t D a t a ( " T e x t " ) ; e v . t a r g e t . a p p e n d C h i l d ( d o c u m e n t . g e t E l e m e n t B y I d ( d a t a ) ) ; }
Code explained: Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop) Get the dragged data with the dataTransfer.getData("Text") method. This method will return any data that was set to the same type in the setData() method The dragged data is the id of the dragged element ("drag1") Append the dragged element into the drop element
More Examples
Drag image back and forth How to drag (and drop) an image back and forth between two <div> elements.
Previous
Next Chapter
Azure Explorer - Free
www.cerebrata.com Manage your Windows Azure Storage with Windows Explorer like GUI. Try
Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial
Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors
Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples
Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz
Color Picker
Statistics
Browser Statistics Browser OS Browser Display
w3schools.com/html/html5_draganddrop.asp
2/3
8/3/13
HTML5 Drag and Drop
RE P O RT E RRO R | HO ME | TO P | P RI N T | FO RU M | A BO U T | A D V E RT I SE WI T H U S
W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.
w3schools.com/html/html5_draganddrop.asp
3/3
