DHTML Events
Fires on the source object when the user first starts to drag a text selection or selected object.
| Inline HTML |
<element ondragstart = "handler" ... > |
All platforms |
| Event property |
object.ondragstart = handler |
ECMA-262 Language Specification |
| Named script |
<script FOR=object EVENT=ondragstart> |
Internet Explorer® only |
| 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. |
| clientX |
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. |
| offsetX |
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
This example shows the order of event firing for drag-and-drop events.
<head>
<script language="JavaScript">
var oNewOption;
function ShowResults ( ) {
arg = event.type + " fired by " +
event.srcElement.id;
oNewOption = new Option();
oNewOption.text = arg;
theResults.add(oNewOption,0);}
</script>
<head>
<body>
<div align="center">
<p>Source events are wired up to this text box.</p>
<input id=theSource value="Text to Drag"
ondragstart="ShowResults()"
ondrag="ShowResults()"
ondragend="ShowResults()">
<br>
<p>Target events are bound to this text box.</p>
<input id=theTarget value="Drag Destination"
ondragenter="ShowResults()"
ondragover="ShowResults()"
ondragleave="ShowResults()"
ondrop="ShowResults()">
<br>
<select id="theResults" size=15>
<option>List of events fired,
starting with the most recent</select>
</div>
</body>
This feature requires Microsoft® Internet Explorer® 5.0 or later.
Show me
Data Transfer Overview, onbeforecut, onbeforecopy, oncut, oncopy, ondrag, ondragend
|
