Question

我想在拖动的图像放在目标元素上时实现一个hello世界。以下代码有效;当拖动的图像被放置在目标图像上时，会显示一个包含hello world的警告框。

但是，只要点击警告框即可。图像显示在黑色窗口中（就像有人点击鼠标左键＆gt;查看图像一样）。这就是我想要阻止的。有谁知道怎么做？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Drag and Drop Demo</title>
    <script>
    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
        //alert(ev);
    } 

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

    function drop(ev) {
        alert('hello world');
        //ev.preventDefault();
        //var data=ev.dataTransfer.getData("Text");
        //ev.target.appendChild(document.getElementById(data));
    }
</script>
</head>
<body>
    <div class="container">

        <img src="1.jpg" draggable="true"></img>
        <img src="2.jpg" draggable="true"></img>
        <img src="3.jpg" draggable="true"></img>
        <img src="4.jpg" draggable="true"></img>
        <br><br>
        <img id="bin" src="bin.jpg" ondrop="drop(event)" ondragover="allowDrop(event)"></img>
    </div>
</body>
</html>

Answer 1

我找到了解决方案。我刚刚将 preventdefault 方法添加到javascript函数中。

function drop(ev) {
        ev.preventDefault();
    }

Ondrop函数不情愿地“查看图像”

1 个答案: