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

Question

好的，所以我可以使用拖放 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>

Answer 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

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

HTML5 Drag and Drop new image and replace existing image inside a Div

html

javascript

drag-and-drop

draggable