In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > initDragEvent (event)

initDragEvent method (event)

Browser support:

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.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.initDragEvent (eventName, bubbles, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget, dataTransfer);

You can find the related objects in the Supported by objects section below.

Parameters:

eventName

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:

beforecopy

beforecut

beforepaste

copy

cut

drag

	3.5

dragend

	3.5

dragenter

	3.5

dragexit

	3.5

draggesture

	3.5

dragleave

	3.5

dragover

	3.5

dragstart

	3.5

drop

	3.5

paste

bubbles

Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.

One of the following values:

false

The event cannot bubble up.

true

The event can bubble up.

cancelable

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:

false

The event cannot be canceled.

true

The event can be canceled.

view

Required. Reference to the window object in which the event is supposed to have occurred. Sets the view property of the event object.

detail

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.

screenX

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.

screenY

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.

clientX

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.

clientY

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.

ctrlKey

Required. Boolean that indicates the Control key state. Sets the ctrlKey property of the event object.

One of the following values:

false

The Control key is not pressed.

true

The Control key is pressed.

altKey

Required. Boolean that indicates the Alt key state. Sets the altKey property of the event object.

One of the following values:

false

The Alt key is not pressed.

true

The Alt key is pressed.

shiftKey

Required. Boolean that indicates the Shift key state. Sets the shiftKey property of the event object.

One of the following values:

false

The Shift key is not pressed.

true

The Shift key is pressed.

metaKey

Required. Boolean that indicates the Meta key state. Sets the metaKey property of the event object.

One of the following values:

false

The Meta key is not pressed.

true

The Meta key is pressed.

button

Required. Integer that specifies which mouse button caused the event. Sets the button property of the event object.

relatedTarget

Required. Reference to the related element to the mouse event. Sets the relatedTarget property of the event object.

dataTransfer

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>