Question

我有一个拖放功能，你可以在5个div框上拖动一些图像。拖放工作在4个div上，但由于某种原因，第5个div框无法工作，每当我尝试将图像拖入该框时，它就会拒绝工作。其他框正常运行，当我将图像放到这些div上时，它工作得很好..只是最后一个不起作用的框。

我认为这可能与对齐：左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;
}

它对我有用，所以它适合你：）

拖放不在一个div上工作

1 个答案: