Как раскрасить td, когда я нажимаю и смахиваю?

Question

У меня есть тест div, который я могу перетащить в таблицу, когда div помещается на вкладку. Я окрашиваю цель <td> в синий цвет. Теперь я хотел бы сделать все остальные td цветными, когда я нажимаю, удерживаю и смахиваю вправо или влево от синего <td>, например, изменение размера.

Итак, мой вопрос: как «изменить размер» мой синий <td>? «Изменить размер» - не лучшее слово, потому что я хочу имитировать это, раскрашивая другие <td>, щелкая и проводя вправо или влево, как изменение размера, если у вас есть подсказка / способ следовать, я буду благодарен.

Я пытаюсь использовать jquery с изменяемым размером пользовательского интерфейса, чтобы поместить div непосредственно в td, но я не могу сделать с ним то, что хочу (я думаю?)

Пожалуйста, имейте посмотрите на фрагмент кода, сложно объяснить, что я хочу получить от 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>

Мы используем класс, чтобы просто отметить ячейки или выделить их. Мы также добавляем псевдонимы, которые не являются частью таблицы. При изменении размера мы можем сохранить размер, но просто посмотрите на положение, чтобы определить, какие ячейки отмечать при движении в одном направлении.