Question

我有一个非常简单的使用jquery拖放图像的示例：

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 50px;
    height: 50px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<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>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="imagenes/jugadores/1.png" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag2" src="imagenes/jugadores/2.png" draggable="true" ondragstart="drag(event)" width="50" height="50">
<img id="drag3" src="imagenes/jugadores/3.png" draggable="true" ondragstart="drag(event)" width="50" height="50">
</body>
</html>

这工作正常，但是我遇到的问题是它始终显示我删除的第一个图像，而我想要的是将当前图像替换为最后一个删除的图像。基本上，实时更新我拖放到div id =“ div1”中的图像。

非常感谢！

Answer 1

这不是JQuery，而是古老的JavaScript。

这里还发生了其他事情。

每当将图像放置在另一个图像上时，它实际上就会嵌套在上一个图像中，如下所示：

<img..>
   <img.. />
</img>

您需要先清除该区域，这意味着您需要抓住父母，但是我不太记得那应该如何工作，但这确实可以做到：

function drop(ev) {
   var dropzone = document.getElementById('div1');
   ev.preventDefault();
   var data = ev.dataTransfer.getData("text");
   if (dropzone.hasChildNodes())
      dropzone.innerHTML = "";
   dropzone.appendChild(document.getElementById(data));
}

如果您对使用jquery进行拖放感兴趣，我建议您这样做：

JQuery droppable

<script type='text/javascript'>

   $( "#draggable" ).draggable();
   $( "#droppable" ).droppable({
      drop: function() {
         alert( "dropped" );
      }
   });

</script>

使用jquery替换图像来拖放图像

1 个答案: