title: How to color td when i click and swipe?
body: <p>I have a test <code>div</code> that i can drag into a table when the <code>div</code> is dropped into the tab i color the target <code>&lt;td&gt;</code> in blue. 
  Now i would like to make all other td beeing colored when i click, hold and swipe to the right or left side of the blue one <code>&lt;td&gt;</code> like resizing.</p>
  
  <p>So my question is:
  How to "resize" my blue <code>&lt;td&gt;</code>?
  "Resize" is not the good word because i want to simulate it doing coloring the others <code>&lt;td&gt;</code> by clicking and swiping to the right or left side like a resize if you have a clue/way to follow i will be thankfull.</p>
  
  <p>i try to use jquery ui resizable to put the <code>div</code> directly in the <code>td</code> but i can't make what i want with it (i think?)</p>
  
  <p>Please have a look at the code snippet, it is hard to explain what I want to get from jQuery.</p>
  
  <p>thanks by advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &gt; 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);
                  }
              });
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;table cellspacing="0" style="border:1px solid black; text-align:center;"&gt;
      &lt;tr style="border:1px solid black;"&gt;
          &lt;th style="border:1px solid black;"&gt;&lt;/th&gt;
          &lt;th style="border:1px solid black;"&gt;Lundi&lt;/th&gt;
          &lt;th style="border:1px solid black;"&gt;Mardi&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
          &lt;th&gt;Ressource 1&lt;/th&gt;
          &lt;td colspan="6" rowspan="4" class="masterContent"&gt;
              &lt;table cellspacing="0" style="border:0;width:100%;" class="containment-wrapper"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
  
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;table cellspacing="0" style="border:0;"&gt;
                              &lt;tr style="border:0;"&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                                  &lt;td style='border:0;' class='ressource'&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;&lt;/td&gt;
                      
  
                  &lt;/tr&gt;
                  &lt;tr class="basr"&gt;
                      &lt;td colspan="26" id="testblocks"&gt;
                          &lt;div class="ui-widget-content ui-corner-tr drag"&gt;
                              test
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th&gt;Ressource 2&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr class="basr"&gt;
          &lt;th&gt;bac à sable&lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>