ondrop

Description
Syntax
Examples
Links

Description

The ondrop attribute for HTML handles a drop on an element.

Syntax

ondrop="value"

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop1</div>
    </div>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop2</div>
    </div>
    <div class="myclass1" ondragenter="myfunction1(event)" ondragleave="myfunction2(event)" ondragover="myfunction3(event)" ondrop="myfunction4(event)">
        <div class="myclass2" draggable="true" ondrag="myfunction5(event)" ondragend="myfunction6(event)" ondragstart="myfunction7(event)">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();
        }
        function myfunction4(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            myparameter.target.append(mydragdrop);
            console.log(myparameter);
        }
        function myfunction5(myparameter)
        {
        }
        function myfunction6(myparameter)
        {
        }
        function myfunction7(myparameter)
        {
            mydragdrop = myparameter.target;
        }
    </script>
</body>
</html>

2 · JS · on

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1">
        <div class="myclass2">dragdrop1</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop2</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();
        }
        function myfunction4(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            myparameter.target.append(mydragdrop);
            console.log(myparameter);
        }
        function myfunction5(myparameter)
        {
        }
        function myfunction6(myparameter)
        {
        }
        function myfunction7(myparameter)
        {
            mydragdrop = myparameter.target;
        }
        for(const myelement of document.querySelectorAll(".myclass1"))
        {
            myelement.ondragenter = myfunction1;
            myelement.ondragleave = myfunction2;
            myelement.ondragover = myfunction3;
            myelement.ondrop = myfunction4;
        }
        for(const myelement of document.querySelectorAll(".myclass2"))
        {
            myelement.draggable = true;
            myelement.ondrag = myfunction5;
            myelement.ondragend = myfunction6;
            myelement.ondragstart = myfunction7;
        }
    </script>
</body>
</html>

3 · JS · addEventListener

<!doctype html>
<html>
<head>
    <style>
        .myclass1
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
            width: 100px;
        }
        .myclass2
        {
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myclass1">
        <div class="myclass2">dragdrop1</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop2</div>
    </div>
    <div class="myclass1">
        <div class="myclass2">dragdrop3</div>
    </div>
    <script>
        let mydragdrop = null;
        function myfunction1(myparameter)
        {
        }
        function myfunction2(myparameter)
        {
        }
        function myfunction3(myparameter)
        {
            myparameter.preventDefault();
        }
        function myfunction4(myparameter)
        {
            const r = Math.random() * 255;
            const g = Math.random() * 255;
            const b = Math.random() * 255;
            const a = Math.random();
            document.body.style.backgroundColor = `rgb(${r} ${g} ${b} / ${a})`;
            myparameter.target.append(mydragdrop);
            console.log(myparameter);
        }
        function myfunction5(myparameter)
        {
        }
        function myfunction6(myparameter)
        {
        }
        function myfunction7(myparameter)
        {
            mydragdrop = myparameter.target;
        }
        for(const myelement of document.querySelectorAll(".myclass1"))
        {
            myelement.addEventListener("dragenter", myfunction1);
            myelement.addEventListener("dragleave", myfunction2);
            myelement.addEventListener("dragover", myfunction3);
            myelement.addEventListener("drop", myfunction4);
        }
        for(const myelement of document.querySelectorAll(".myclass2"))
        {
            myelement.draggable = true;
            myelement.addEventListener("drag", myfunction5);
            myelement.addEventListener("dragend", myfunction6);
            myelement.addEventListener("dragstart", myfunction7);
        }
    </script>
</body>
</html>