jQuery拖拽任务框时如何根据其data-column值自动覆盖对应数量时间表块

实现方案 #

你可以借助CSS Grid的grid-column: span属性实现任务跨列效果，修改逻辑如下：

1. 拖拽悬浮时，根据任务的data-column值高亮对应数量的连续单元格
2. 释放任务时，给当前放置的单元格设置跨列属性，同时销毁被覆盖单元格的放置能力
3. 处理边界判断，避免任务跨列超出当前行的剩余单元格数量

修改后的完整可运行代码

JavaScript

$(function() {
  const MAX_COL = 9; // 时间表总共9个可放置列

  $('.job').draggable({
    revert: function (dropped) {
      // 放置位置无效时回弹
      if (!dropped) return true;
      const colCount = parseInt($(this).attr('data-column'));
      const startIdx = $(dropped).index() - 1; // 减去第一个姓名列
      return startIdx + colCount > MAX_COL;
    }
  });

  $('.container').droppable({
    hoverClass: 'active',
    drop: function(e, ui) {
      const colCount = parseInt(ui.draggable.attr('data-column'));
      const startIdx = $(this).index() - 1;
      // 边界判断：剩余单元格不够时不放置
      if (startIdx + colCount > MAX_COL) return;

      // 设置当前单元格跨列
      $(this)
        .css('grid-column', `span ${colCount}`)
        .html(ui.draggable.text())
        .addClass("dropped")
        .droppable('destroy');

      // 移除被覆盖的后续单元格
      const $containers = $(this).parent().find('.container');
      for(let i = 1; i < colCount; i++) {
        $containers.eq(startIdx + i).remove();
      }
    },
    over: function(e, ui) {
      const colCount = parseInt(ui.draggable.attr('data-column'));
      const startIdx = $(this).index() - 1;
      const $containers = $(this).parent().find('.container');
      // 高亮对应数量的单元格
      for(let i = 0; i < colCount; i++) {
        if (startIdx + i < MAX_COL) {
          $containers.eq(startIdx + i).addClass("dropped");
        }
      }
    },
    out: function(e, ui) {
      const colCount = parseInt(ui.draggable.attr('data-column'));
      const startIdx = $(this).index() - 1;
      const $containers = $(this).parent().find('.container');
      // 移除高亮
      for(let i = 0; i < colCount; i++) {
        if (startIdx + i < MAX_COL) {
          $containers.eq(startIdx + i).removeClass("dropped");
        }
      }
    }
  });
});

CSS （原有样式保留，新增以下规则即可）

.container.dropped {
  text-align: center;
  font-weight: 500;
}

HTML （和原有代码一致，无需修改）

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="job" data-column="4">Job-A</div>
<div class="job" data-column="1">Job-B</div>
<div class="job" data-column="2">Job-C</div>
<div class="job" data-column="7">Job-D</div>

<div class="scheduleContain">
  <div class="timing">
    <div>Name</div>
    <div>9am</div>
    <div>10am</div>
    <div>11am</div>
    <div>12am</div>
    <div>1pm</div>
    <div>2pm</div>
    <div>3pm</div>
    <div>4pm</div>
    <div>5pm</div>
  </div>

  <div class="dropJob">
    <div>John Smith</div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user11662447