Scribd
Upload
287 views

HTML5 Drag and Drop

Drag and drop is a feature in HTML5 that allows any element to be draggable. It works by setting draggable to true, specifying the dragged data on dragstart, and appending the dragged element on drop. Browsers like IE9+, Firefox, Chrome and Safari support HTML5 drag and drop, though not in Safari 5.1.2. An example shows dragging an image into a div by getting the dragged element ID on start and end.

Uploaded by

Ankit Saha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
287 views

HTML5 Drag and Drop

Drag and drop is a feature in HTML5 that allows any element to be draggable. It works by setting draggable to true, specifying the dragged data on dragstart, and appending the dragged element on drop. Browsers like IE9+, Firefox, Chrome and Safari support HTML5 drag and drop, though not in Safari 5.1.2. An example shows dragging an image into a div by getting the dragged element ID on start and end.

Uploaded by

Ankit Saha
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like