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?