Question

我有要无限拖放的图像。移动时从第一个框移到第二个框，图像从第一个框消失。不要丢失使用.appendchild（img）方法在第一个框上再次创建相同图像的图像。我想从初始位置拖动图像，而不是从拖放位置拖动图像。因此，当我将图像拖放到框中时，我将draggable属性更改为false。它在第一个框上创建了图像，没有问题。但是我不能将其从由于该图像没有事件属性，因此再次将其移到第三位。我想再次赋予它们这些属性，并且应该重复进行，因为我想永远这样做。这是我尝试过的

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2,#div3 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</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));
  var img = document.createElement("img");
  img.src = "https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png";
  var src = document.getElementById("div1");
  img.style.width="88px";
  img.style.height="31px";
  src.appendChild(img);
  drag1.draggable=false;
}
</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the three div elements.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="https://mikasasports.com/wp-content/uploads/2015/04/MVA2001.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

如何为已拖动的图像再次获取事件属性

0 个答案: