Javascript HTML5使用数据传输拖放传递图像

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

Html:

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中的一个bug还是我遗漏了什么

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

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

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