Question

我的任务是将船舶图像拖放到网格上以占用很少的单元格，但是我只能完成拖放到一个单元格。我试图添加droppable =＆＃34; true＆＃34;和ondragover =＆＃34; allowDrop（event）＆＃34;对于每个细胞，但它给出了相同的结果。你能帮我把它放在多个牢房吗？

＆＃13;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

＆＃13;

.table-bordered {
    background-color: darkcyan;
    min-width: 441px;
}

.dropTarget {
    overflow:hidden;
    position:relative;
}

.shipContainerClass{
    min-width: 441px;
    min-height: 441px;
}

.cellClass {
    min-width: 40px;
    min-height: 40px;
    max-height: 40px;
    max-width: 40px;
    height: 40px;
    width: 40px;
    text-align:center;
    background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<div> 
<table class="table-bordered dropTarget" id="yourTableId" ondrop="drop(event)" ondragover="allowDrop(event)">
   <tr>
      <td class="cellClass" style="text-align:center"></td>
      <td class="cellClass" style="text-align:center">A</td>
      <td class="cellClass" style="text-align:center">B</td>
      <td class="cellClass" style="text-align:center">C</td> 
      <td class="cellClass" style="text-align:center">D</td>
      <td class="cellClass" style="text-align:center">E</td>
      <td class="cellClass" style="text-align:center">F</td>
      <td class="cellClass" style="text-align:center">G</td>
      <td class="cellClass" style="text-align:center">H</td>
      <td class="cellClass" style="text-align:center">I</td>
      <td class="cellClass" style="text-align:center">J</td>
   </tr>
   <tr> 
      <td class="cellClass" style="text-align:center">1</td>
      <td class="cellClass" data-location="A1" style="text-align:center"></td>
      <td class="cellClass" data-location="B1" style="text-align:center"></td>
      <td class="cellClass" data-location="C1" style="text-align:center"></td>
      <td class="cellClass" data-location="D1" style="text-align:center"></td>
      <td class="cellClass" data-location="E1" style="text-align:center"></td>
      <td class="cellClass" data-location="F1" style="text-align:center"></td>
      <td class="cellClass" data-location="G1" style="text-align:center"></td>
      <td class="cellClass" data-location="H1" style="text-align:center"></td>
      <td class="cellClass" data-location="I1" style="text-align:center"></td>
      <td class="cellClass" data-location="J1" style="text-align:center"></td>
   </tr>
   <tr> 
      <td class="cellClass" style="text-align:center">2</td>
      <td class="cellClass" data-location="A2" style="text-align:center"></td>
      <td class="cellClass" data-location="B2" style="text-align:center"></td>
      <td class="cellClass" data-location="C2" style="text-align:center"></td>
      <td class="cellClass" data-location="D2" style="text-align:center"></td>
      <td class="cellClass" data-location="E2" style="text-align:center"></td>
      <td class="cellClass" data-location="F2" style="text-align:center"></td>
      <td class="cellClass" data-location="G2" style="text-align:center"></td>
      <td class="cellClass" data-location="H2" style="text-align:center"></td>
      <td class="cellClass" data-location="I2" style="text-align:center"></td>
      <td class="cellClass" data-location="J2" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">3</td>
      <td class="cellClass" data-location="A3" style="text-align:center"></td>
      <td class="cellClass" data-location="B3" style="text-align:center"></td>
      <td class="cellClass" data-location="C3" style="text-align:center"></td>
      <td class="cellClass" data-location="D3" style="text-align:center"></td>
      <td class="cellClass" data-location="E3" style="text-align:center"></td>
      <td class="cellClass" data-location="F3" style="text-align:center"></td>
      <td class="cellClass" data-location="G3" style="text-align:center"></td>
      <td class="cellClass" data-location="H3" style="text-align:center"></td>
      <td class="cellClass" data-location="I3" style="text-align:center"></td>
      <td class="cellClass" data-location="J3" style="text-align:center"></td> 
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">4</td>
      <td class="cellClass" data-location="A4" style="text-align:center"></td>
      <td class="cellClass" data-location="B4" style="text-align:center"></td>
      <td class="cellClass" data-location="C4" style="text-align:center"></td>
      <td class="cellClass" data-location="D4" style="text-align:center"></td>
      <td class="cellClass" data-location="E4" style="text-align:center"></td>
      <td class="cellClass" data-location="F4" style="text-align:center"></td>
      <td class="cellClass" data-location="G4" style="text-align:center"></td>
      <td class="cellClass" data-location="H4" style="text-align:center"></td>
      <td class="cellClass" data-location="I4" style="text-align:center"></td>
      <td class="cellClass" data-location="J4" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">5</td>
      <td class="cellClass" data-location="A5" style="text-align:center"></td>
      <td class="cellClass" data-location="B5" style="text-align:center"></td>
      <td class="cellClass" data-location="C5" style="text-align:center"></td>
      <td class="cellClass" data-location="D5" style="text-align:center"></td>
      <td class="cellClass" data-location="E5" style="text-align:center"></td>
      <td class="cellClass" data-location="F5" style="text-align:center"></td>
      <td class="cellClass" data-location="G5" style="text-align:center"></td>
      <td class="cellClass" data-location="H5" style="text-align:center"></td>
      <td class="cellClass" data-location="I5" style="text-align:center"></td>
      <td class="cellClass" data-location="J5" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">6</td>
      <td class="cellClass" data-location="A6" style="text-align:center"></td>
      <td class="cellClass" data-location="B6" style="text-align:center"></td>
      <td class="cellClass" data-location="C6" style="text-align:center"></td>
      <td class="cellClass" data-location="D6" style="text-align:center"></td>
      <td class="cellClass" data-location="E6" style="text-align:center"></td>
      <td class="cellClass" data-location="F6" style="text-align:center"></td>
      <td class="cellClass" data-location="G6" style="text-align:center"></td>
      <td class="cellClass" data-location="H6" style="text-align:center"></td>
      <td class="cellClass" data-location="I6" style="text-align:center"></td>
      <td class="cellClass" data-location="J6" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">7</td>
      <td class="cellClass" data-location="A7" style="text-align:center"></td>
      <td class="cellClass" data-location="B7" style="text-align:center"></td>
      <td class="cellClass" data-location="C7" style="text-align:center"></td>
      <td class="cellClass" data-location="D7" style="text-align:center"></td>
      <td class="cellClass" data-location="E7" style="text-align:center"></td>
      <td class="cellClass" data-location="F7" style="text-align:center"></td>
      <td class="cellClass" data-location="G7" style="text-align:center"></td>
      <td class="cellClass" data-location="H7" style="text-align:center"></td>
      <td class="cellClass" data-location="I7" style="text-align:center"></td>
      <td class="cellClass" data-location="J7" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">8</td>
      <td class="cellClass" data-location="A8" style="text-align:center"></td>
      <td class="cellClass" data-location="B8" style="text-align:center"></td>
      <td class="cellClass" data-location="C8" style="text-align:center"></td>
      <td class="cellClass" data-location="D8" style="text-align:center"></td>
      <td class="cellClass" data-location="E8" style="text-align:center"></td>
      <td class="cellClass" data-location="F8" style="text-align:center"></td>
      <td class="cellClass" data-location="G8" style="text-align:center"></td>
      <td class="cellClass" data-location="H8" style="text-align:center"></td>
      <td class="cellClass" data-location="I8" style="text-align:center"></td>
      <td class="cellClass" data-location="J8" style="text-align:center"></td>
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">9</td>
      <td class="cellClass" data-location="A9" style="text-align:center"></td>
      <td class="cellClass" data-location="B9" style="text-align:center"></td>
      <td class="cellClass" data-location="C9" style="text-align:center"></td>
      <td class="cellClass" data-location="D9" style="text-align:center"></td>
      <td class="cellClass" data-location="E9" style="text-align:center"></td>
      <td class="cellClass" data-location="F9" style="text-align:center"></td>
      <td class="cellClass" data-location="G9" style="text-align:center"></td>
      <td class="cellClass" data-location="H9" style="text-align:center"></td>
      <td class="cellClass" data-location="I9" style="text-align:center"></td>
      <td class="cellClass" data-location="J9" style="text-align:center"></td> 
   </tr>
   <tr>
      <td class="cellClass" style="text-align:center">10</td>
      <td class="cellClass" data-location="A10" style="text-align:center"></td>
      <td class="cellClass" data-location="B10" style="text-align:center"></td>
      <td class="cellClass" data-location="C10" style="text-align:center"></td>
      <td class="cellClass" data-location="D10" style="text-align:center"></td>
      <td class="cellClass" data-location="E10" style="text-align:center"></td>
      <td class="cellClass" data-location="F10" style="text-align:center"></td>
      <td class="cellClass" data-location="G10" style="text-align:center"></td>
      <td class="cellClass" data-location="H10" style="text-align:center"></td>
      <td class="cellClass" data-location="I10" style="text-align:center"></td>
      <td class="cellClass" data-location="J10" style="text-align:center"></td>
   </tr>
</table>

<div class="shipsContainerClass" ondrop="drop(event)" ondragover="allowDrop(event)">
   <div id="drop1" style="background-image:url('http://boomboomboat.com/themes/default/s-v.png');    background-size:75px 710px; background-position-x: 1px; background-position-y: 0px; height:200px; width: 40px; overflow: hidden;" draggable="true" ondragstart="drag(event)">
   </div>
</div>

＆＃13;

如何在网格的几个单元格上拖动元素

0 个答案: