时间戳

首页 > 解决方案 > 如何为已拖动的图像再次获取事件属性

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

问题描述

我有我想无限拖放的图像。当我移动时，从第一个框到第二个框，图像​​从第一个框消失。不要丢失使用 .appendchild(img) 方法在第一个框上再次创建相同图像的图像。我想从初始位置拖动图像，而不是从我放置的位置。因此，当我将图像放入框中时，我将可拖动属性更改为 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>

标签： javascripthtmlcss

解决方案

推荐阅读