javascript - 拖放不适用于一个 div

Question

我有一个拖放功能，您可以在其中将一些图像拖到 5 个 div 框上。拖放适用于 4 个 div，但由于某种原因，第 5 个 div 框不起作用，每当我尝试将图像拖到该框中时，它就拒绝工作。其他盒子功能正常，当我将图像放到这些 div 上时它工作正常..它只是最后一个盒子不起作用。

我认为这可能与我放入的 align:left CSS 有关(不确定)。

如果有人能提供帮助那就太好了

html:

<div id="PlayerActions">
     <img id="holder" src="images/actions.png" alt="Smiley face"> 

     <img id="Right" class="forward"src="images/right.png" draggable="true" ondragstart="drag(event)">
     <img id="Left" class="back" src="images/left.png" draggable="true" ondragstart="drag(event)">
     <img id="Up" class="upwards" src="images/top.png" draggable="true" ondragstart="drag(event)">
     <img id="Down" class="downwards" src="images/down.png" draggable="true" ondragstart="drag(event)">
     <img id="Done" class="finished"src="images/tick.png" draggable="true" ondragstart="drag(event)">
</div>

<div id="PlayerDrop">
   <div id="Drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <div id="Drop5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

js:

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 clone = document.getElementById(data).cloneNode(true);
    clone.id = clone.id + (new Date()).getMilliseconds();
    ev.target.appendChild(clone);

    if (ev.target == document.getElementById("delete")) {
        var img = document.getElementById(data);
        img.parentNode.removeChild(img); 
    }
}

CSS:

#PlayerDrop {
  position: relative;
  left: 245px;
  top: 5px;
  z-index:1;
  width: 369px;
  height: 121px;
  background-image:url(images/sequence2.png) ;
}

#Drop1 {
  position: relative;
  left: 16px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  float: left;
  border-style: solid;
  border-color: #66cff2;
}

#Drop2 {
  position: relative;
  left: 17px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  float: left;
  border-style: solid;
  border-color: #66cff2;
}

#Drop3 {
  position: relative;
  left: 23px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  float: left;
  border-style: solid;
  border-color: #66cff2;
}

#Drop4 {
  position: relative;
  left: 26px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  float: left;
  border-style: solid;
  border-color: #66cff2;
}

#Drop5 {
  position: relative;
  left: 296px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  border-style: solid;
  border-color: #66cff2;
}

Answer 1

只需为 Div 5 稍微编辑一下 css。

这是CSS:

#Drop5 {
  float: left;
  position: relative;
  left: 26px;
  top: 30px;
  width:40px;
  height:49px;
  padding:10px;
  z-index:3;
  border-style: solid;
  border-color: #66cff2;
}

它对我有用，所以它也应该对你有用:)