Menu
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?
391
Personally I wouldn't use HTML 5 drag and drop in this case, I'd choose mouse events.
Note that I've written for a 2-column span; you'll need to tweak it if you want it to be more flexible.
$(function() {
var isDragging = false;
var $selected = $('.table-area-selected');
var $cells = $('table').find('.data-cell');
var colSpan = 2;
var $currentCell = $($cells[0]);
var cellWidth = $currentCell.outerWidth();
$selected.css('width', cellWidth * colSpan);
$selected.css('height', $currentCell.outerHeight() - 2); // fiddle factor
$selected.css('top', $currentCell.position().top);
$selected.css('left', $currentCell.position().left);
// drag start
$selected.mousedown(dragStart);
// drag end
$(window).mouseup(dragEnd);
// drag over cells
$cells.mouseenter(draggingIntoNewCell);
$selected.mousemove(draggingInSelectedCell);
function dragStart() {
isDragging = true;
}
function dragEnd() {
isDragging = false;
}
function draggingIntoNewCell() {
$currentCell = $(this);
reposition($currentCell);
}
// find if we've moved into the next column under this selection
function draggingInSelectedCell(e) {
if (isDragging) {
// find relative position within selection div
var relativeXPosition = (e.pageX - $(this).offset().left);
if (relativeXPosition > cellWidth) { // moved into next column
$currentCell = $currentCell.next();
reposition($currentCell);
}
}
}
function reposition($cell) {
// only reposition if not the last cell in the table (otherwise can't span 2 cols)
if (isDragging && $cell.next().hasClass('data-cell')) {
$selected.css('top', $cell.position().top);
$selected.css('left', $cell.position().left);
}
}
});table th,
table td {
padding: 8px 40px;
border: 1px solid #cecece;
position: relative;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.table-area-selected {
position: absolute;
background: green;
border: 1px solid blue;
cursor: pointer;
}<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="table-area">
<table>
<thead>
<tr>
<th>someDate</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>someDateVal1</td>
<td class="data-cell"></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>
<td class="data-cell"></td>
</tr>
</tbody>
</table>
<div class="table-area-selected"></div>
</div>
</body>
</html>Demo: http://plnkr.co/edit/RIhDiu9bI00SJysKvMuu?p=preview
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
