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

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

1 个答案: