拖动图片，但从可拖动的图像中拖放名称元素

问题描述：

在构建拖放页面时，我希望将图像拖到拖放区域，但在拖放时我希望删除一些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>

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

不多说真的，我一直没能找到任何例子/教程我可以拖放相同的内容，但是这个心不是什么即时寻找。 –

你的代码在哪里？ –

我已更新帖子 –

答

你需要的一切都是在问题本身。你只需要改变一行代码：

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

该行告诉浏览器元素与data指定的ID（可拖动图片的ID）进入下降元素追加。对其进行修改，以便将代码附加到元素的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"/>

拖动图片，但从可拖动的图像中拖放名称元素

相关推荐