JavaScript Drag and Drop Events


1. drag: This event occurs when an element or a text selection is being dragged by the user i.e. when we "grab" an element and drags it to a different location.

Syntax:

    <element ondrag = ”functionName(event)” >


Example:

    <p draggable=”true” ondrag=”dragging(event)” ></p>
    <script>
        function dragging(event)
        {
            alert(“element is dragged”);
        }
    </script>    


2. dragstart: This event occurs when the user starts to drag an element or a text selection.

Syntax:

    <element ondragstart = ”functionName(event)” >


Example:

    <p draggable=”true” ondragstart=”dragStart(event)” ></p>
    <script>
        function dragStart()
        {
            alert(“element starts dragging”);
        }
    </script>


3. dragenter: This event occurs when a dragged element or a text selection enters a valid drop target.

Syntax:

    <element ondragenter = ”functionName(event)” >


Example:

    <p draggable=”true” ondragenter=”dragEnter(event)” ></p>
    <script>
        function dragEnter()
        {
            alert(“Drop target enters here”);
        }
    </script>    


4. dragover: This event occurs when a dragged element or a text selection is being dragged over a valid drop target.

By default, we can’t drop an element into other elements. To do this, we need to call event.preventDefault() method to prevent the default handling of the element.

Syntax:

    <element ondragover = ”functionName(event)” >


Example:

    <p draggable=”true” ondragover=”dragOver(event)” ></p>
    <script>
        function dragOver()
        {
            event.preventDefault();
            alert(“element is over drop target”);
        }
    </script>    



5. dragleave: This event occurs when a dragged element or a text selection leaves a valid drop target.

Syntax:

    <element ondragleave = ”functionName(event)” >


Example:

    <p draggable=”true” ondragleave=”dragLeave(event)” ></p>
    <script>
        function dragLeave()
        {
            alert(“Drop target leaves here”);
        }
    </script>    


6. dragend: This event occurs when the user has finished dragging an element or a text selection into a valid drop target by releasing the mouse pointer.

Syntax:

    <element ondragend = ”functionName(event)” >


Example:

    <p draggable=”true” ondragend=”dragEnd(event)” ></p>
    <script>
        function dragEnd()
        {
            alert(“Dragging has finished”);
        }
    </script>    


7. drop: This event occurs when a dragged element or a text selection is dropped into a valid drop target.

By default, we can’t drop an element into other elements. To do this, we need to call event.preventDefault() method to prevent the default handling of the element.

Syntax:

    <element ondrop = ”functionName(event)” >


Example:

    <p draggable=”true” ondrop=”drop(event)” ></p>
    <script>
        function drop()
        {
            event.preventDefault();
            alert(“element is dropped into drop target”);
        }
    </script>