单击和滑动时如何为 td 着色？

Question

我有一个测试div，当div 拖放到选项卡中时我可以将它拖到表格中，我将目标<td> 涂成蓝色。 现在，当我单击、按住并滑动到蓝色 <td> 的右侧或左侧时，我想让所有其他 td beeing 着色，就像调整大小一样。

所以我的问题是： 如何“调整”我的蓝色<td>？ “调整大小”不是一个好词，因为我想模拟它为其他人着色<td>，如果您有线索/方法可以通过单击并向右或向左滑动来调整大小，我将不胜感激。

我尝试使用 jquery ui resizable 将div 直接放在td 中，但我无法用它制作我想要的东西（我想？）

请看一下代码 sn-p，很难解释我想从 jQuery 中得到什么。

提前致谢

$(function () {
            // There's the gallery and the trash
            var $job = $("#testblocks"),
                $ressource = $(".ressource");

            // Let the gallery items be draggable
            $("div", $job).draggable({
                cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                revert: "invalid", // when not dropped, the item will revert back to its initial position
                containment: ".containment-wrapper",
                helper: "clone",
                cursor: "move",
                snap: "td",
                scroll: false,
                refreshPositions: true,
                drag: function () {
                    var offset = $(this).offset();
                    var xPos = offset.left;
                    var yPos = offset.top;
                    /*$('#posX').text('x: ' + xPos);
                    $('#posY').text('y: ' + yPos);*/
                }
            });
            /*$("div", $job).resizable({
                handles: 'e, w',
                containment: ".containment-wrapper"
            });*/

            $ressource.droppable({
                hoverClass: 'hovering',
                tolerance: 'pointer',
                accept: "#testblocks > div, .ressource div",
                classes: {
                    "ui-droppable-active": "ui-state-highlight"
                },
                drop: function (event, ui) {
                    //$(ui.draggable).appendTo($(this));
                    $(this).css("background-color", "blue");
                    $(this).next("td").css("background-color", "blue");
                    $(this).next("td").next("td").css("background-color", "blue");
                    $(this).next("td").next("td").next("td").css("background-color", "blue");
                }
            });

            $job.droppable({
                accept: ".ressource div",
                classes: {
                    "ui-droppable-active": "custom-state-active"
                },
                drop: function (event, ui) {
                    $(ui.draggable).appendTo($job);
                }
            });
        });

.drag {
            height: 49px;
            width: 60px;
            text-align: center;
        }

        td {
            border: 1px solid black;
            /*height:50px;*/
            width: 160px;
        }

        th {
            border: 1px solid black;
            /*height:50px;*/
            width: 180px;
        }

        tr {
            border: 1px solid black;
            height: 150px;
        }

        .basr {
            height: 150px;

        }

        .masterContent {
            padding: 0;
            margin: 0;
        }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table cellspacing="0" style="border:1px solid black; text-align:center;">
    <tr style="border:1px solid black;">
        <th style="border:1px solid black;"></th>
        <th style="border:1px solid black;">Lundi</th>
        <th style="border:1px solid black;">Mardi</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>Ressource 1</th>
        <td colspan="6" rowspan="4" class="masterContent">
            <table cellspacing="0" style="border:0;width:100%;" class="containment-wrapper">
                <tr>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>

                </tr>
                <tr>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    <td><table cellspacing="0" style="border:0;">
                            <tr style="border:0;">
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                                <td style='border:0;' class='ressource'></td>
                            </tr>
                        </table></td>
                    

                </tr>
                <tr class="basr">
                    <td colspan="26" id="testblocks">
                        <div class="ui-widget-content ui-corner-tr drag">
                            test
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <th>Ressource 2</th>
    </tr>
    <tr class="basr">
        <th>bac à sable</th>
    </tr>

    </tbody>
</table>

Answer 1

这是我建议的一个例子。由于您无法调整单元格的大小，因此您需要放置一些东西来充当代表。考虑以下代码。

$(function() {
  // There's the gallery and the trash
  var $job = $("#testblocks"),
    $ressource = $(".ressource");

  $("div", $job).draggable({
    cancel: "a.ui-icon",
    revert: "invalid",
    containment: ".containment-wrapper",
    helper: "clone",
    cursor: "move",
    snap: "td",
    scroll: false,
    refreshPositions: true,
    drag: function() {
      var offset = $(this).offset();
      var xPos = offset.left;
      var yPos = offset.top;
      /*$('#posX').text('x: ' + xPos);
      $('#posY').text('y: ' + yPos);*/
    }
  });

  $ressource.droppable({
    hoverClass: 'hovering',
    tolerance: 'pointer',
    accept: "#testblocks > div, .ressource div",
    classes: {
      "ui-droppable-active": "ui-state-highlight"
    },
    drop: function(event, ui) {
      //$(ui.draggable).appendTo($(this));
      var i = $(this).index();
      var p = i - 1;
      var n = i + 1;
      var t = $(this);
      var r = t.parent();
      t
        .add($("td", r).eq(n))
        .add($("td", r).eq(++n))
        .add($("td", r).eq(++n))
        .addClass("marked");
      n++;

      $("<div>", {
        class: "ghost for"
      }).css({
        width: t.width(),
        height: t.height()
      }).appendTo("body").position({
        my: "left top",
        at: "left top",
        of: $(".marked:first", r)
      }).resizable({
        handles: "w",
        resize: function(e, ui) {
          if (ui.position.left < $("td", r).eq(p).position().left) {
            $("td", r).eq(p--).addClass("marked");
          }
          ui.size.width = t.width();
        }
      });

      $("<div>", {
        class: "ghost aft"
      }).css({
        width: t.width(),
        height: t.height()
      }).appendTo("body").position({
        my: "left top",
        at: "left top",
        of: $(".marked:last", r)
      }).resizable({
        handles: "e",
        resize: function(e, ui) {
          var f = ui.position.left;
          if (ui.position.left < $("td", r).eq(n).position().left) {
            $("td", r).eq(n++).addClass("marked");
          }
          ui.size.width = t.width();
        }
      });
    }
  });

  $job.droppable({
    accept: ".ressource div",
    classes: {
      "ui-droppable-active": "custom-state-active"
    },
    drop: function(event, ui) {
      $(ui.draggable).appendTo($job);
    }
  });
});

.drag {
  height: 49px;
  width: 60px;
  text-align: center;
}

td {
  border: 1px solid black;
  /*height:50px;*/
  width: 160px;
}

th {
  border: 1px solid black;
  /*height:50px;*/
  width: 180px;
}

tr {
  border: 1px solid black;
  height: 150px;
}

.basr {
  height: 150px;
}

.masterContent {
  padding: 0;
  margin: 0;
}

.marked {
  background-color: blue;
}

.ghost {
  border: 0;
  background: transparent;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table cellspacing="0" style="border:1px solid black; text-align:center;">
  <thead>
    <tr style="border:1px solid black;">
      <th style="border:1px solid black;"></th>
      <th style="border:1px solid black;">Lundi</th>
      <th style="border:1px solid black;">Mardi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Ressource 1</th>
      <td colspan="6" rowspan="4" class="masterContent">
        <table cellspacing="0" style="border:0;width:100%;" class="containment-wrapper">
          <tr>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
              <td>
                <table cellspacing="0" style="border:0;">
                  <tr style="border:0;">
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                  </tr>
                </table>
              </td>
              <td>
                <table cellspacing="0" style="border:0;">
                  <tr style="border:0;">
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                  </tr>
                </table>
              </td>
              <td>
                <table cellspacing="0" style="border:0;">
                  <tr style="border:0;">
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                  </tr>
                </table>
              </td>
              <td>
                <table cellspacing="0" style="border:0;">
                  <tr style="border:0;">
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                  </tr>
                </table>
              </td>
              <td>
                <table cellspacing="0" style="border:0;">
                  <tr style="border:0;">
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                    <td style='border:0;' class='ressource'></td>
                  </tr>
                </table>
              </td>

          </tr>
          <tr>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>
            <td>
              <table cellspacing="0" style="border:0;">
                <tr style="border:0;">
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                  <td style='border:0;' class='ressource'></td>
                </tr>
              </table>
            </td>


          </tr>
          <tr class="basr">
            <td colspan="26" id="testblocks">
              <div class="ui-widget-content ui-corner-tr drag">
                test
              </div>
            </td>
          </tr>
        </table>
        </td>
    </tr>
    <tr>
      <th>Ressource 2</th>
    </tr>
    <tr class="basr">
      <th>bac à sable</th>
    </tr>

  </tbody>
</table>

我们使用一个类来简单地标记单元格或突出显示它们。我们还添加了不属于表格的伪句柄。当我们调整大小时，我们可以保留大小，但只需查看位置以确定当我们朝一个方向移动时要标记哪些单元格。