时间戳

首页 > 解决方案 > 使用 Native HTML5 Drag-And-Drop，我怎样才能让一个播放器占据多个表格单元格？

html - 使用 Native HTML5 Drag-And-Drop，我怎样才能让一个播放器占据多个表格单元格？

问题描述

我在表格网格上使用拖放。我试图让一个游戏块占据网格的 4 个方格，而不是一个单元格。目前，该代码使您能够成功地将 div 从一个单元格拖动到另一个单元格。现在我想将可拖动 div 的大小加倍，使其占据 4 个单元格。

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

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

我怎样才能做到这一点？下面是我的代码和小提琴。

<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>

这是小提琴：https ://jsfiddle.net/Stormjack/osvu6mea/25/

当前代码使用原生 HTML5，但如有必要，我可以将其更改为使用 jQuery 库。感谢您的帮助！

标签： htmljquerycssdrag-and-drop

解决方案

使用 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 cols。

在这个阶段，您将需要调整单元格。因为你的表是 4 列。通过将 colspan=4 分配给一个单元格并在行中添加额外的单元格，它将使其包含 7 列。您可以找到并删除这些额外的单元格。

推荐阅读