JavaScript: how to set drag-and-drop step in table

I have such code:

<div class="table-area">
  <table>
    <thead>
      <tr>
      <th>someDate</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>someDateVal1</td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
      </tr>
      <tr>
        <td>someDateVal2</td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
        <td class="data-cell"></td>
      </tr>
    </tbody>
  </table>

  <div class="table-area-selected"
    draggable="true"></div>
</div>

and js:

$(function() {

  var selected = $('.table-area-selected');

  var cell = $('table').find('.data-cell');


  selected.css('width', $(cell[0]).outerWidth() * 2);
  selected.css('height', $(cell[0]).outerHeight());


  selected.css('top', $(cell[0]).position().top);
  selected.css('left', $(cell[0]).position().left);

  $('.table-area-selected').on('dragstart', function(event) {
    console.log('drag', event);
  });

  $('table').on('drop', function(event) {
    var selected = $('.table-area-selected');

    var cell = event.target;

    console.log('drop', event);


    selected.css('width', $(cell).outerWidth() * 2);
    selected.css('height', $(cell).outerHeight());


    selected.css('top', $(cell).position().top);
    selected.css('left', $(cell).position().left);
  });

  $('table').on('dragover', function(event) {
    event.preventDefault();
  });


});

https://plnkr.co/edit/NpRHbgHnUgGfgAOJnSTw?p=preview

Is it possible to drag this item like other schedule plugins? Like this: https://dhtmlx.com/docs/products/demoApps/room-reservation-html5-js-php/

Because now my rectangle is free. I need to set it's movements on table grid: like this: https://www.screencast.com/t/EXKQwTwTwkb and not this: https://www.screencast.com/t/g6jbP4s9hBX2

Is it possible to do?