Fires on the source object when the user first starts to drag a text selection or selected object.
| Inline |
<element ondragstart = "handler" ... > |
| Script |
object.ondragstart = handler |
| Bubbles |
Yes |
| Cancels |
Yes |
| To invoke |
Drag the selected text or object. |
| Default action |
Calls the associated event handler. |
The ondragstart event is the first to fire when a drag procedure is initiated. It is essential to every drag operation, yet is just one of several source events in the data-transfer object model. Source events use the setData method of the dataTransfer object to provide information about data being transferred. The list of source events includes:
While event handlers in the Document Object Model do not receive parameters directly, the handler can query the event object for data.
Event Object Properties
| altKey |
Retrieves the current state of the ALT key. |
| cancelBubble |
Sets or retrieves whether the current event should bubble up the hierarchy of event handlers. |
| clientX |
Retrieves the x-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| clientY |
Returns the y-coordinate of the position of the cursor when the mouse is clicked, relative to the size of the client area of the window but excluding window decorations or scroll bars. |
| ctrlKey |
Retrieves the state of the CTRL key. |
| dataTransfer |
Provides access to predefined clipboard formats for use in data transfer operations. |
| offsetX |
Retrieves the horizontal coordinate of the mouse's position relative to the object firing the event. |
| offsetY |
Retrieves the vertical coordinate of the mouse's position relative to the object firing the event. |
| returnValue |
Sets or retrieves the return value from the event. |
| screenX |
Retrieves the horizontal position of the mouse, in pixels, relative to the user's screen. |
| screenY |
Retrieves the vertical position of the mouse, in pixels, relative to the user's screen. |
| srcElement |
Retrieves the object that fired the event. |
| type |
Retrieves the event name from the event object. |
| x |
Returns the horizontal position of the mouse when the event fires. |
| y |
Returns the vertical position of the mouse when the event fires. |
This example detects the tagName of the object from which the ondragstart event has originated. Because the event bubbles, it can be handled at the BODY level.
<body ondragstart="
alert('You have dragged something from the '+
event.srcElement.tagName)">
<div align="center">
<h5>Select and drag any text on this document.</h5>
<input type=text value="This is a textbox" readOnly>
<br><br>
<span>This is a span</span>
<br><br>
<textarea readOnly>This is a textarea</textarea>
</div>
</body>
Show me