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中的现有图像

1 个答案: