使用本机 HTML5 拖放，如何让一个棋子占据多个 table 单元格？

Question

我在 table 网格上使用拖放。我试图让一个棋子占据网格的 4 个方格，而不是一个单元格。目前，该代码使您能够成功地将 div 从一个单元格拖动到另一个单元格。现在我想将可拖动对象的大小加倍 div 以便它占据 4 个单元格。

在此示例中，单元格大小固定为 50x50 像素。 div 是 100x100。目前，div 扩展它占据的任何单元格，以及与该单元格关联的行和列。我不希望扩展单元格，而是希望 div 覆盖 4 个单元格的 space。

本质上，我不希望 div 包含在单个单元格的边界内，而是占据 4 个单元格。拖动后，当它被放下时，播放的棋子需要捕捉到单元格边框。

我该怎么做？下面是我的代码，还有一个 fiddle.

<style>
    table td {
      height: 50px;
      width: 50px;
    }
    .piece {
      height: 100px;
      width: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #09C;
      font-weight: bold;
      padding-top: 5px;
    }
</style>

<table id="targetTable" border="1">
    <tbody>
      <tr>
        <td>
          <div class="piece" id="a" draggable="true">Move Me</div>
        </td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

<script>
  $(function() {
    initDragAndDrop();
  });

  function initDragAndDrop() {
    $('.piece').on('dragstart', function(event) {
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));
    });
    $('table td').on('dragenter dragover drop', function(event) {
        event.preventDefault();
        if (event.type === 'drop') {
             var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
             de = $('#' + data).detach();
             de.appendTo($(this));
        }
    });
  }
</script>

这里是fiddle：https://jsfiddle.net/Stormjack/osvu6mea/25/

当前代码使用本机 HTML5，但如果需要，我可能会更改它以使用 jQuery 库。感谢您的帮助！

Answer 1

使用 colspan 属性:

$(this).attr('colspan',4);

因此您的代码将变为：

 if (event.type === 'drop') {
        var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
        de = $('#' + data).detach();
        de.appendTo($(this));
        $(this).attr('colspan',4);

      }

这将使您的单元格相当于 4 列。

在此阶段，您需要调整单元格。因为你的 table 是 4 列。通过将 colspan=4 分配给一个单元格，并且行中有额外的单元格将使其包含 7 列。您可以找到并删除那些多余的单元格。

Answer 2

有了绝对定位，你还需要一个相对定位。

示例：https://jsfiddle.net/Twisty/Ldsaegq2/2/

CSS

body {
  font-family: helvetica, arial, sans-serif;
}

table td {
  height: 50px;
  width: 50px;
  position: relative;
}

.piece {
  height: 95px;
  width: 100px;
  background-color: #09C;
  font-weight: bold;
  padding-top: 5px;
  position: absolute;
  top: 1px;
  left: 1px;
}

掉落物品然后 "sticks" 位置。

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

使用本机 HTML5 拖放，如何让一个棋子占据多个 table 单元格？

Using Native HTML5 Drag-And-Drop, how can I make a playing piece occupy multiple table cells?

html

css

jquery

drag-and-drop