A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.geeksforgeeks.org/html/html-ondragstart-event-attribute/ below:

HTML ondragstart Event Attribute - GeeksforGeeks

HTML ondragstart Event Attribute

Last Updated : 11 Jul, 2025

HTML ondragstart Event Attribute is used when the user wants to drag the text or element. It is simply the process in which we press on the desired text to drag and drop them to a different location.

Basically, it Initiates when the user starts dragging an element and is used to set data to be transferred or apply visual effects during drag start. It also Facilitates the creation of dynamic and interactive drag-and-drop interfaces in HTML.

Syntax 
<element ondragstart="script">
DRAG & DROP process includes many operations

ondrag

It is used when an element is being dragged

ondragstart

It is used when the user starts to drag an element

ondragend

It is used when the user has finished dragging the element

ondrop

It is used when the dragged element is dropped on the drop target

ondragover

It is used when the dragged element is over the drop target

ondragleave

It is used when the dragged element leaves the drop target

ondragenter

It is used when the dragged element enters the drop target

Example 1: In this example we will return when the element dragged and dropped.  

HTML 
<!DOCTYPE HTML>
<html>

<head>
    <style>
        .droptarget {
            float: CENTRE;
            width: 150px;
            height: 45px;
            margin: 25px;
            padding: 15px;
            border: 2px solid LIGHTGREEN;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        p {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        HTML | ondragend Event Attribute
    </h3>
    <div class="droptarget" 
      ondrop="drop(event)" 
      ondragover="allowDrop(event)">

        <!-- ondragstart script -->
        <p ondragstart="dragStart(event)" 
      ondrag="dragging(event)" 
      ondragend="dragEnd(event)" draggable="true"
            id="dragtarget">
            PRESS & DRAG
        </p>

    </div>
    <div class="droptarget" ondrop="drop(event)" 
      ondragover="allowDrop(event)">
    </div>
    <p id="demo"></p>

    <script>
        function dragStart(event) {
            event.dataTransfer.setData(
                "Text", event.target.id);
        }

        function dragging(event) {
            document.getElementById(
                "demo").innerHTML = "Dragging";
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            event.preventDefault();
            var data =
                event.dataTransfer.getData("Text");

            event.target.appendChild(
                document.getElementById(data));

            document.getElementById(
                "demo").innerHTML =
                "Dropped";
        }

        function dragEnd(event) {
           
            document.getElementById("demo").
              innerHTML = "Drag ended";
        }
    </script>
</body>

</html>

Output:

Example 2: In this example we will see the implementation of above tag with alert button.

HTML 
<!DOCTYPE HTML>
<html>

<head>
    <style>
        .droptarget {
            float: CENTRE;
            width: 150px;
            height: 45px;
            margin: 25px;
            padding: 15px;
            border: 2px solid LIGHTGREEN;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        p {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        HTML | ondragend Event Attribute
    </h3>
    <div class="droptarget" 
      ondrop="drop(event)" 
      ondragover="allowDrop(event)">

        <!-- ondragstart script -->
        <p ondragstart="dragStart(event)" 
      ondrag="dragging(event)" 
      ondragend="dragEnd(event)" draggable="true"
            id="dragtarget">
            PRESS & DRAG
        </p>

    </div>
    <div class="droptarget" ondrop="drop(event)" 
      ondragover="allowDrop(event)">
    </div>
    <p id="demo"></p>

    <script>
        function dragStart(event) {
            event.dataTransfer.setData(
                "Text", event.target.id);
        }

        function dragging(event) {
            document.getElementById(
                "demo").innerHTML = "Dragging";
        }

        function allowDrop(event) {
            event.preventDefault();
        }

        function drop(event) {
            event.preventDefault();
            var data =
                event.dataTransfer.getData("Text");

            event.target.appendChild(
                document.getElementById(data));

            document.getElementById(
                "demo").innerHTML =
                "Dropped";
        }

        function dragEnd(event) {
            alert("ondragend Event Attribute Triggered")
            document.getElementById("demo").
              innerHTML = "Drag ended";
        }
    </script>
</body>

</html>

Output:

Supported Browsers

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4