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

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

本文关键字：图像 Div 替换 新图像 拖放 HTML5      更新时间：2023-09-26

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

一个好的解决方案是也使用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
}

演示

相关文章：