GlobalEventHandlers.ondrop
A global event handler
for the drop
event.
Syntax
JavaScript
Copy Code
var <var>dropHandler</var> = <var>targetElement</var>.ondrop;
Return value
dropHandler
- The drop event handler for element
targetElement
.
Example
This example demonstrates the use of the ondrop
attribute to define an element's drop
event handler.
JavaScript
Copy Code
<!DOCTYPE html> <html lang=en> <title>Examples of using the ondrag Global Event Attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("Drag"); } function dragstart_handler(ev) { console.log("dragStart"); ev.dataTransfer.setData("text", ev.target.id); } function drop_handler(ev) { console.log("Drop"); ev.currentTarget.style.background = "lightyellow"; ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } function dragover_handler(ev) { console.log("dragOver"); ev.preventDefault(); } </script> <body> <h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> </body> </html>
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'ondrop' in that specification. |
Living Standard | |
HTML5.1 The definition of 'ondrop' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 3.5 (1.9.1) | 10 | 12 | 3.1 |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | Not supported | Not supported | Not supported | Not supported | Not supported | 10 | Not supported | Not supported |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/globaleventhandlers/ondrop