拖放不適用於一個div

Question

我具有拖放功能，您可以在5 div框上拖動一些圖像。 拖放可在4個div上起作用，但由於某些原因，第5個div框不起作用，每當我嘗試將圖像拖放到該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;
}

它對我有用，所以應該對你有用:)