ondrop event
Fires on the target object when the mouse button is released during a drag-and-drop operation.
Syntax
| HTML Attribute | <element ondrop = "handler(event)"> |
| Event Property | object.ondrop = handler; |
| attachEvent Method | object.attachEvent("ondrop", handler) |
| addEventListener Method | object.addEventListener("drop", handler, useCapture) |
Event information
| Synchronous | No |
| Bubbles | Yes |
| Cancelable | Yes |
Event handler parameters
- pEvtObj [in]
Type: IHTMLEventObj
Standards information
There are no standards that apply here.
Remarks
The HTMLButtonElementEvents::ondrop event fires before the HTMLButtonElementEvents::ondragleave and HTMLButtonElementEvents::ondragend events.
When scripting custom functionality, use the IHTMLEventObj::returnValue property to disable the default action.
You must cancel the default action for HTMLButtonElementEvents::ondragenter and HTMLButtonElementEvents::ondragover in order for HTMLButtonElementEvents::ondrop to fire. In the case of a div, the default action is not to drop. This can be contrasted with the case of an input type=text element, where the default action is to drop. In order to allow a drag-and-drop action on a div, you must cancel the default action by specifying window.event.returnValue=false in both the HTMLButtonElementEvents::ondragenter and HTMLButtonElementEvents::ondragover event handlers. Only then will HTMLButtonElementEvents::ondrop fire.
As of Microsoft Internet Explorer 5, drag-and-drop events can be used to carry out drag-and-drop activities, not only with input type=text elements, but also with block and inline tags. For example, text can be selected, dragged, then dropped on a div target. This causes several target events to fire, including HTMLButtonElementEvents::ondragenter, HTMLButtonElementEvents::ondragover, and HTMLButtonElementEvents::ondrop. Because drag-and-drop actions are not directly supported on block and inline tags, you must use extra scripting to carry out the move or copy to the target using IHTMLElement::innerText, for example.
Calls the associated event handler.
To invoke this event, do one of the following:
- Drag the selection over a valid drop target and release the mouse.