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

You are here: Reference > JavaScript > client-side > event handling > events > ondragstart

ondragstart event | dragstart event

Browser support:

	3.5

Occurs on the source element when the user starts the drag operation.

Note: The ondragstart event is supported in Firefox from version 3.5. In the earlier versions, use the draggesture event instead.

If some content is selected in a HTML document, the user has the ability to start dragging it. To drag the selected content, press and hold down a mouse button (browsers support dragging with the left button by default) on the selection and start to move the mouse. To drop the dragged data, release the mouse button over the target.

By default, the target of a drag operation can be an editable element (textarea, input:text, input:password, input:search), an element in content editable mode, a document in design mode or another application. If you want to allow for other elements to be a drop target during a drag operation, cancel both the ondragenter and ondragover events.

The following events are fired on the source element:
- The ondragstart event is fired when the user starts to drag the selection.
- The ondrag event is fired periodically during the drag operation.
- The ondragend event is fired when the user has finished the drag operation (released the mouse button or pressed ESC).
Note: If the source of a drag operation is an editable element (see above), the draggesture event is fired after the drag operation has been finished. It seems to be a bug in Firefox.
The following events are fired on an arbitrary element during dragging:
- The ondragenter event is fired when the user moves the mouse pointer into the element.
- The ondragover event is fired periodically while the mouse pointer is over the element.
- The ondragleave event is fired when the user moves the mouse pointer out of the element.
The following events are fired on a possible target element:
- The ondrop event is fired when the dragged data is dropped on the element.
Note: the ondragover event needs to be canceled in Google Chrome and Safari to allow firing the ondrop event.

The ondragstart event is cancelable, if it is canceled, the drag operation does not start.

If you want to customize the drag-and-drop operation or you need access to the dragged data, use the dataTransfer object.

How to register:

In HTML:

	3.5

In JavaScript:

object.ondragstart = handler;

	3.5

object.addEventListener ("dragstart", handler, useCapture);

9	3.5

object.attachEvent ("ondragstart", handler);

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

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles

Yes

Cancelable

Yes

Event object

DragEvent

9	3.5

MouseEvent

Actions that invoke the ondragstart event:

Starting to drag the selection.
Invoking the dragDrop method on the source element.

The order of events related to the ondragstart event:

Action	Event order
Any action that invokes the ondragstart event.	ondragstart ondrag ondragend

Example HTML code 1:

This example illustrates the use of the ondragstart event:

<div style="background-color:#f0d0a0; width:200px" ondragstart="return false">
    The drag operation is not allowed for this field.
    Try to select and drag some text from it.
</div>
<br />
<div style="background-color:#d0f0a0; width:200px">
    The drag operation is allowed for this field.
    Try to select and drag some text from it.
</div>

<br /><br /><br />
A possible drop target:<br />
<textarea rows="5">You can drop the dragged data here.</textarea>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous, but it works in older Firefox also. Note: to cancel the draggesture event, use the stopPropagation method instead of the preventDefault method!

<head>
    <script type="text/javascript">
        function Init () {
            var forbidSource = document.getElementById ("forbidDrag");
            if (forbidSource.addEventListener) {
                forbidSource.addEventListener ("draggesture", OnDragStart, false);  // Firefox
            }
        }

        function OnDragStart (event) {
            event.stopPropagation ();   // cancels the draggesture event (preventDefault) !!!
        }
    </script>
</head>
<body onload="Init ()">
    <div style="background-color:#f0d0a0; width:200px" id="forbidDrag" ondragstart="return false">
        The drag operation is not allowed for this field.
        Try to select and drag some text from it.
    </div>
    <br />
    <div style="background-color:#d0f0a0; width:200px">
        The drag operation is allowed for this field.
        Try to select and drag some text from it.
    </div>

    <br /><br /><br />
    A possible drop target:<br />
    <textarea rows="5">You can drop the dragged data here.</textarea>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example dumps the order of events in case of dragging:

<head>
    <script type="text/javascript">
        function Init () {
            var source = document.getElementById ("source");
            var target = document.getElementById ("target");
            if (source.addEventListener) {  // all browsers except IE before version 9
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("dragstart", DumpInfo, false);
                    // Firefox before version 3.5
                source.addEventListener ("draggesture", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("drag", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                source.addEventListener ("dragend", DumpInfo, false);

                    // Firefox, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragenter", DumpInfo, false);
                    // Firefox, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragover", DumpInfo, false);
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("dragleave", DumpInfo, false);
                    // Firefox
                target.addEventListener ("dragexit", DumpInfo, false);
                    // Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
                target.addEventListener ("drop", DumpInfo, false);
                    // Firefox before version 3.5
                target.addEventListener ("dragdrop", DumpInfo, false);
            }
            else {
                if (source.attachEvent) {   // IE before version 9
                    source.attachEvent ("ondragstart", DumpInfo);
                    source.attachEvent ("ondrag", DumpInfo);
                    source.attachEvent ("ondragend", DumpInfo);

                    target.attachEvent ("ondragenter", DumpInfo);
                    target.attachEvent ("ondragover", DumpInfo);
                    target.attachEvent ("ondragleave", DumpInfo);
                    target.attachEvent ("ondrop", DumpInfo);
                }
            }
        }

        function DumpInfo (event) {
            var firedOn = event.target ? event.target : event.srcElement;
            if (firedOn.tagName === undefined) {
                firedOn = firedOn.parentNode;
            }

            var info = document.getElementById ("info");
            if (firedOn.id == "source") {
                info.innerHTML += "<span style='color:#008000'>" + event.type + "</span>, ";
            }
            else {
                info.innerHTML += "<span style='color:#800000'>" + event.type + "</span>, ";
            }

            if (event.type == "dragover") {
                    // the dragover event needs to be canceled to allow firing the drop event
                if (event.preventDefault) {
                    event.preventDefault ();
                }
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="source" style="background-color:#d0f0a0; width:200px">
        Select and drag some text from this field and drop it into the target.
    </div>
    <br /><br />
    <textarea id="target" rows="5">
        This is the target element.
    </textarea>
    <br /><br />
    <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the clearData, getData and setData methods. Note that the getData method always returns an empty string in a handler for the ondragstart event in Safari and Google Chrome so the dropped text's letters won't be in reverse order.

<head>
    <script type="text/javascript">
        function OnDragStart (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);
                    // always empty in Safari and Google Chrome
                if (textData) {
                    if (textData.length > 20) {
                        event.dataTransfer.clearData (format);
                    }
                    else {
                        var reverseText = "";
                        for (var i = 0; i < textData.length; i++) {
                            reverseText += textData.charAt (textData.length - i - 1);
                        }
                        event.dataTransfer.setData (format, reverseText);
                    }
                }
            }
        }

        function OnDropTarget (event) {
            if (event.dataTransfer) {
                var format = "Text";
                var textData = event.dataTransfer.getData (format);
                if (!textData) {
                    textData = "<span style='color:red'>The data transfer contains no text data.</span>";
                }
                
                var targetDiv = document.getElementById ("target");
                targetDiv.innerHTML = 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 ondragstart="OnDragStart (event)" style="width:300px; height:100px; background-color:#80f0f0;">
        Select and drag some text from this field and drop into the green zone. The dropped text's letters will be in reverse order.
        The length of the dragged text cannot be longer than 20 characters!
    </div>
    <div id="target" ondragenter="return false;" ondragover="return false;" ondrop="return OnDropTarget (event);"
        style="width:300px; height:100px; background-color:#80f080;">
    </div>
</body>