Fires on the target element when the object being dragged enters a valid drop target.
| Inline |
<element ondragenter = "handler" ... > |
| Script |
object.ondragenter = handler |
| Bubbles |
Yes |
| Cancels |
Yes |
| To invoke |
- Drag the selection over a valid drop target within the browser.
- Drag the selection to a valid drop target within another browser window.
|
| Default action |
Calls the associated event handler. |
The ondragenter event is the first of the target events to fire during a drag operation. Target events use the getData method to stipulate what data and data formats to retrieve. The list of drag-and-drop target 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. |
The example shows the order of event firing for both source and target drag-and-drop events.
The following example illustrates when and where each event fires during a drag-and-drop operation by listing each event and the name of the object firing it in a list box.
Sample Code
<head>
<script language="JavaScript">
var oNewOption;
// code for dynamically adding options to a select
function ShowResults() {
// information about the events
// and what object fired them
arg = event.type + " fired by " +
event.srcElement.id; oNewOption = new Option();
oNewOption.text = arg;
oResults.add(oNewOption,0);
}
</script>
</head>
<body>
<p>Source events are wired up to this text box.</p>
<INPUT id=txtDragOrigin VALUE="Text to Drag"
ondragstart="ShowResults()"
ondrag="ShowResults()"
ondragend="ShowResults()">
<p>Target events are bound to this text box.</p>
<INPUT id=txtDragDestination VALUE="Drag Destination"
ondragenter="ShowResults()"
ondragover="ShowResults()"
ondragleave="ShowResults()"
ondrop="ShowResults()">
<select id=oResults SIZE=30>
<option>List of Events Fired
</select>
</body>
A, ACRONYM, ADDRESS, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, document, DT, EM, FIELDSET, FONT, FORM, Hn, HR, HTMLAREA, I, IMG, INPUT, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
Data Transfer Overview, ondragstart