Question

我试图将图像拖到两个位置之间，然后在它到达时移动。我的形象，这是狗屎，是可拖动的，将拖入狗场的区域，但实际上不会落在那里，就像它不会移动，只是快速回到它的原始位置。我不知道如何解决这个问题，并希望得到任何帮助。

附加的HTML / Javascript代码：

<!doctype html>
<html>
<h>CMPSC Class</h>
<p>Lab 5</p>
<p>Paragraph</p>
<div id = "doghouse" style="position: relative; left: 0; top: 0"; ondragover="allowDrop(event)"; ondrop="drop(event)">
<img id = "dh"; height = 320; width = 320; src = "http://images.clipartpanda.com/doghouse-clipart-ilmp-dog_house.jpg", style = "left: 0; top: 0; position: relative" ></img>
<img id = "dogpic" src = "http://images.clipartpanda.com/cartoon-20clipart-20free-cartoon_dog_clip_art_22216.jpg"; height = 100; width = 100; style = "position: absolute; top: 210px; left: 112px"; draggable="true"; ondrag="drag(event)"></img>
</div>
<div id = "park"><img id = "dpark"; height = 600; width = 600; src = "http://www.clipartidy.com/wp-content/uploads/hd/hd-new-design-plans-for-broadway-hill-park-unveiled-graphic.jpg"; ondragover="allowDrop(event)"; ondrop="dragfunction(event)"></img></div>
<script>
var b = document.getElementById("dogpic");
b.addEventListener("drag", drop(event), false);
b.addEventListener("drag", drag(event), false);
b.addEventListener("drag", allowDrop(event), false);
function drop(event){
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  if(event.target.id = "park"){
    event.target.appendChild(document.getElementById(data));
    img.style.left = Math.floor((Math.random() * 600) + 1);
    img.style.top = Math.floor((Math.random() * 600) + 1);
    setTimeout(dragfunction(event), 3000);
  }
  if(event.target.id = "doghouse"){
    event.target.appendChild(document.getElementById(data));
  }
}
function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}
function allowDrop(event) {
    event.preventDefault();
}
</script>
</html>

在Javascript中拖动图像的问题

0 个答案: