You are here: Reference > JavaScript > client-side > event handling > methods > initDragEvent (event)
initDragEvent method (event)
9 | ||||
Initializes an event object created by the createEvent method with type of 'DragEvent'.
An event object created by the createEvent method with type of 'DragEvent' implements the DragEvent interface.
After initialization, the event can be dispatched with the dispatchEvent method.
After initialization, the event can be dispatched with the dispatchEvent method.
In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.
Syntax:
You can find the related objects in the Supported by objects section below.
Parameters:
Required. String that specifies the name (type) of the event to initialize.
This parameter is case sensitive! Sets the type property of the event object.
For a complete list of events, see the page for Events in JavaScript.
The initDragEvent method is appropriate for initialization of DragEvent types principally, for other events, use the type-specific initialization methods.
Note: custom event names are also allowed.
Events represented by the DragEvent interface:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that specifies whether the event can be canceled or not. Sets the cancelable property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Reference to the window object in which the event is supposed to have occurred. Sets the view property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies additional information about the event. For mouse click events specifies the number of clicks, for mouse scroll events specifies the distance that the mouse wheel rolled. Sets the detail property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the screen. Sets the screenX property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies the y-coordinate of the mouse pointer relative to the top-left corner of the screen. Sets the screenY property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. Sets the clientX property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies the x-coordinate of the mouse pointer relative to the top-left corner of the browser window's client area. Sets the clientY property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that indicates the Control key state. Sets the ctrlKey property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that indicates the Alt key state. Sets the altKey property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that indicates the Shift key state. Sets the shiftKey property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Boolean that indicates the Meta key state. Sets the metaKey property of the event object.
One of the following values:
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Integer that specifies which mouse button caused the event. Sets the button property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Reference to the related element to the mouse event. Sets the relatedTarget property of the event object. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Required. Reference to the dataTransfer object that represents the drag-and-drop operation. Sets the dataTransfer property of the event object. |
Return value:
This method has no return value.
Example HTML code 1:
This example shows how to simulate a drop operation on a textarea element when the dragged data is dropped on another element:
|
||||
<head> <script type="text/javascript"> function OnDropTarget (event) { if (event.initDragEvent) { var dropEvent = document.createEvent ("DragEvent"); dropEvent.initDragEvent ("drop", true, true, window, 0, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null, event.dataTransfer); var target2 = document.getElementById ("target2"); target2.dispatchEvent (dropEvent); } else { alert ("Your browser does not support the initDragEvent method."); } if (event.stopPropagation) { event.stopPropagation (); } else { event.cancelBubble = true; } return false; } function OnDropTarget2 (event) { if (event.dataTransfer) { var format = "Text"; var textData = event.dataTransfer.getData (format); var target2 = document.getElementById ("target2"); target2.value = textData; } else { alert ("Your browser does not support the dataTransfer object."); } if (event.stopPropagation) { event.stopPropagation (); } else { event.cancelBubble = true; } return false; } </script> </head> <body> <div style="background-color:#d0f0a0; width:200px"> Select and drag some text from this field and drop it into the blue field. </div> <br /><br /> <div style="background-color:#8080f0; width:200px; height:100px;" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event)"> </div> <br /><br /> <textarea id="target2" rows="5" ondrop="return OnDropTarget2 (event)"> </textarea> </body> |
||||
|
||||
Did you find this example helpful?
|
Supported by objects:
Related pages:
event
createEvent
initEvent
initKeyEvent
initMessageEvent
initMutationEvent
initOverflowEvent
initTextEvent
initUIEvent
createEvent
initEvent
initKeyEvent
initMessageEvent
initMutationEvent
initOverflowEvent
initTextEvent
initUIEvent
External links:
User Contributed Comments