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?
1 Answers
Answers 1
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>
0 comments:
Post a Comment