Drag and Drop not working on one div

Question

I have a drag and drop feature where you can drag some images on 5 div boxes. The drag and drop works on 4 of the divs but for some reason the 5th div box doesn't work, whenever i try to drag an image into that box it just refuses to work. The other boxes function correctly and when i drop images onto these divs it works fine..its just the last box that does not work.

I think it might be to do with the align:left css i've put in (not sure).

If anyone could help that would be great

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

just edit the css a little bit for Div 5.

Here is the 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;
}

It worked for me, so it should work for you :)