CODEWITHSUNDEEP
javascripthtml
af_imi4
af_imi4

Reputation: 91

Drop event not happening

With this code the drag message is shown but not the dropped message. When I drag the first element is not visually dragged but the dragstart event is triggered

 <!DOCTYPE HTML>
<html>
    <head>

    </head>
        <body>
            <section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section>
            <section draggable="true" id="destino" style="height: 200px; width: 200px; border-color: blue; border-style: solid;">destino</section>

            <script>
                window.addEventListener("load",carga);
                var origen = document.getElementById('origen');
                var destino = document.getElementById('destino');

                function carga(e){
                    origen.addEventListener('dragstart',function(e){
                        e.preventDefault();
                        e.dataTransfer.setData("Text",origen.outerHTML);
                        console.log("dragstart");
                    },false);


                    destino.addEventListener('drop',function(e){
                        e.preventDefault();
                        //origen.innerHTML = e.dataTransfer.getData("Text");
                        console.log('dropped');
                    },false);
                }
            </script>
        </body>
</html>

Upvotes: 2

Views: 106

Answers (1)

Sarah Gro&#223;
Sarah Gro&#223;

Reputation: 10879

You are cancelling the dragstart event with e.preventDefault(), that's why the element is not being dragged.

You must, however, instead cancel the dragover event of your drop target in order to allow other elements to be dropped onto it. (More information on why that is the case can be found here)

window.addEventListener("load",carga);
var origen = document.getElementById('origen');
var destino = document.getElementById('destino');

function carga(e){
    origen.addEventListener('dragstart',function(e){
        //e.preventDefault();
        e.dataTransfer.setData("Text",origen.outerHTML);
        console.log("dragstart");
    },false);

    destino.addEventListener('dragover',function(e){
        e.preventDefault();
    });
    destino.addEventListener('drop',function(e){
        e.preventDefault();
        //origen.innerHTML = e.dataTransfer.getData("Text");
        console.log('dropped');
    },false);
}
<section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section>
<section draggable="true" id="destino" style="height: 200px; width: 200px; border-color: blue; border-style: solid;">destino</section>

Upvotes: 1

Related Questions