javascript - 拖动图片但从可拖动图像中删除名称元素

Question

在构建拖放页面时，我希望将图像拖到放置区域，但在放置时我希望放置一些 HTML 而不是图像。

这可能吗？

也许使用 HTML5 作为 ID 文本或文件 URL。

这是我的代码:

可拖动元素

 <img id="drag1" name="<h1>My Super Image</h1>" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

拖放区域

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

我的标题脚本

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

我可以将图像拖到放置区域，但是我想从名称字段中放置文本而不是图像。我怎样才能做到这一点？

Answer 1

您需要的一切都在问题本身中。您只需要更改一行代码:

ev.target.appendChild(document.getElementById(data));

该行告诉浏览器将具有 data 中指定的 id(可拖动图片的 id)的元素附加到 drop 元素中。修改它，以便将代码附加到元素的 name 属性中，而不是整个元素中。

类似这样的事情:

ev.target.innerHTML += document.getElementById(data).name;

完成此操作后，您将附加可拖动图像的 name 属性中的任何内容，而不是附加图像。

您可以在这里看到它的工作原理:

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

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    //ev.target.appendChild(document.getElementById(data));
    ev.target.innerHTML += document.getElementById(data).name;
}

#div1 {
    border:1px dotted gray;
    background:#f0f0f0;
    height:100px;
    width:100px;
    margin-bottom:20px;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" name="<h1>My Super Image</h1>" src="http://lorempixel.com/336/69/people" draggable="true" ondragstart="drag(event)" width="336" height="69"/>