Question

我尝试拖动图像并将其放在目标div上。但是，不是丢弃图像本身，而是仅显示图像路径。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="DragAndDrop_2.css">
        <script src="DragAndDrop_2.js" type="text/javascript"></script>
    </head>
    <body>
        <img id="my-image" draggable="true" src="images/thumbUp.jpg" height="200">
        <div id="target-box"> </div>
    </body>
</html>

样式表：

*{
    margin:0px;
    padding:0px;
}

#target-box {
    width:600px;
    height:600px;
    border:1px solid black;
}

使用Javascript：

function initialFunction() {
    picture = document.getElementById('my-image');
    targetBox = document.getElementById('target-box');

    picture.addEventListener('drag', drag, false);
    targetBox.addEventListener('dragover', function(ev) { ev.preventDefault(); }, false);
    targetBox.addEventListener('drop', drop, false);

}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.outerHTML);
}

function drop(ev) {
    var code = ev.dataTransfer.getData("Text");
    targetBox.innerHTML = code;
}

window.addEventListener('load', initialFunction, false);

我听说过HTML5中拖放操作的一些问题。我想知道在这种情况下它是API中的错误还是我错过了什么。

HTML5拖放 - 使用DataTransfer传递图像

0 个答案: