将job div拖放到时间表容器后如何调整长度覆盖其他时段div

你当前用的是网格布局实现时段排版，直接利用网格的跨列属性就能实现任务拉伸效果，修改逻辑如下：

1. 调整投放逻辑：不要把任务嵌入单个时段容器，投放后直接将任务作为.dropJob的直接子元素，记录任务的起始时段序号，用grid-column属性控制占用的列数
2. 给已投放的任务绑定横向拉伸能力，拉伸时对齐时段格子边界，拉伸结束后自动计算跨列数更新样式
3. 投放任务后把对应位置的时段容器隐藏，避免和任务重叠

完整修改代码 #

JavaScript #

$(function() {
  // 任务拖拽投放逻辑
  $('.job').draggable({
    revert: true,
    helper: 'clone'
  });

  $('.container').droppable({
    hoverClass: 'active',
    drop: function(e, ui) {
      const startCol = $(this).index() + 1; // 网格列从1开始计数
      const $newJob = $('<div class="dropped-job"></div>')
        .text(ui.draggable.text())
        .css({
          'grid-column-start': startCol,
          'grid-column-end': startCol + 1, // 默认占1小时
          'line-height': '25px',
          'padding': '3px 4px',
          'background-color': '#B9CD6D',
          'border': '1px solid red'
        });
      // 插入到dropJob中
      $('.dropJob').append($newJob);
      // 隐藏已被占用的起始时段容器
      $(this).hide();
      // 给新任务绑定拉伸能力
      initResizable($newJob);
    }
  });

  // 初始化任务拉伸功能
  function initResizable($job) {
    const colWidth = $('.container').outerWidth();
    $job.resizable({
      handles: 'e', // 仅允许右侧拉伸
      grid: [colWidth, 0], // 横向拉伸吸附到列边界
      minWidth: colWidth, // 最小宽度1小时
      maxWidth: colWidth * 9, // 最大到当天结束
      stop: function(e, ui) {
        // 计算当前跨列数
        const span = Math.round(ui.size.width / colWidth);
        const startCol = parseInt($job.css('grid-column-start'));
        $job.css('grid-column-end', startCol + span);
        // 隐藏中间被占用的时段容器
        for(let i = startCol; i < startCol + span; i++) {
          $(`.container:nth-of-type(${i})`).hide();
        }
      }
    });
  }
});

CSS #

只需在原有CSS基础上追加如下样式：

.dropped-job {
  position: relative;
  z-index: 10;
  cursor: ew-resize;
}
.dropJob {
  position: relative;
}

HTML结构无需修改，沿用你原有代码即可 #

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