Question

使用此代码显示拖动消息，但不显示已删除的消息。当我拖动时，第一个元素没有被视觉拖动但是触发了dragstart事件

 <!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>

Answer 1

您正在使用e.preventDefault()取消dragstart事件，这就是没有拖动元素的原因。

但是，您必须取消放置目标的dragover事件，以便允许将其他元素放到其上。（可以找到有关案例原因的更多信息here）

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

丢弃事件没有发生

1 个答案: