HTML5 拖放新图像并替换 Div 中的现有图像答案

【问题标题】：HTML5 Drag and Drop new image and replace existing image inside a DivHTML5 拖放新图像并替换 Div 中的现有图像
【发布时间】：2015-03-24 14:24:51
【问题描述】：

好的，所以我可以使用拖放 HTML5 功能，但是当我将图像拖到 div 容器上，然后尝试将新图像拖到同一个容器中时，它不会更新为新图像，而是旧图像遗迹。有谁知道我怎样才能让它更新？我的代码如下

<style>
#Drop1 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
#Drop2 {width:70px;height:70px;padding:10px;border:1px solid#aaaaaa;}
</style>
<script>
function allowDrop(ev) {

  ev.preventDefault();
}

function drag(ev) {

  ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("text/html");

  var nodeCopy = document.getElementById(data).cloneNode(true);
  nodeCopy.id = "newId"; 
  ev.target.appendChild(nodeCopy);
}
</script>
<body>

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

  <img id="drag1" src="forward.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
  <img id="drag2" src="left.png" draggable="true" ondragstart="drag(event)" width="64" height="64">
</body>

【问题讨论】：

如果拖动第二个图像，是否要从 div 中删除第一个图像？
我想要它，以便如果将新图像拖放到该 div 上..第一个图像被删除。

标签： javascript html drag-and-drop draggable

【解决方案1】：

一个好的解决方案是也使用 jquery。

还有这个功能：

function itemInSpot(drag_item, spot) {
    var oldSpotItem = $(spot).find('img');
    if (oldSpotItem.length > 0) {
        oldSpotItem.appendTo('#inventory').draggable({
            revert: 'invalid'
        });
    }
        var item = $('<img />');
    item.attr('src', drag_item.attr('src')).attr('class',     drag_item.attr('class')).appendTo(spot).draggable({
        revert: 'invalid'
});
    drag_item.remove(); // remove the old object
}

Demo

【讨论】：