How to enable dragging and resizing of divs across table cells and rows-CodePudding

This

I need to be able to resize the colored divs vertically and also drag them to any row/cell in the table.

Example. Drag resize orange div into row beneath it.

Or in this case if I resize the Green div the yellow div needs to be pushed into the row beneath it.

Dragging divs is self-explanatory.

I have a working sandbox DEMO

I did find a fiddle online that has exactly what I need but it uses Jquery and I would prefer not to use it if possible. FIDDLE OF WHAT I AM LOOKING FOR

$(function() { $(".drop").sortable({ connectWith: "td", placeholder: "ui-state-highlight" }).disableSelection(); }); $(function() { $(".resize").resizable({ grid: [50, 0], handles: 'e' }); });

CodePudding user response：

Vanilla JS solution

You said: I did find a fiddle online that has exactly what I need, but it uses Jquery and I would prefer not to use it if possible.

I tried to replicate the output of the fiddle mentioned above using vanilla JS (HTML Drag and Drop API). This is the closest that I could get.

Note: Change resize: horizontal; to resize: vertical; if you want to resize boxes vertically.

See the snippet below. Let me know if this is helpful.

document.addEventListener('DOMContentLoaded', (event) => { var dragSrcEl = null; function handleDragStart(e) { dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; } function handleDragEnter(e) { this.classList.add('over'); } function handleDragLeave(e) { this.classList.remove('over'); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); } if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function handleDragEnd(e) { items.forEach(function(item) { item.classList.remove('over'); }); } let items = document.querySelectorAll('.container .drop'); items.forEach(function(item) { item.addEventListener('dragstart', handleDragStart, false); item.addEventListener('dragenter', handleDragEnter, false); item.addEventListener('dragover', handleDragOver, false); item.addEventListener('dragleave', handleDragLeave, false); item.addEventListener('drop', handleDrop, false); item.addEventListener('dragend', handleDragEnd, false); }); });

table { height: 100px; } td { height: 68px; width: 150px; border: gray thin solid; } .resize { top: 10px; width: 50px; height: 50px; float: left; border: #002DA4 thin solid; border-radius: 8px; text-align: center; border-right-color: red; position: absolute; overflow: hidden; resize: horizontal; z-index: 1; } td.drop { position: relative; width: 60px; }

<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> <div> <table cellspacing='3'> <tr> <th>8am</th> <th>9am</th> <th>10am</th> <th>11am</th> <th>12n</th> <th>1pm</th> <th>2pm</th> <th>3pm</th> <th>4pm</th> <th>5pm</th> </tr> <tbody class='container'> <tr> <td class='drop'> <div draggable='true' class='resize'>Session A</div> </td> <td draggable='true' class='drop'> <div draggable='true' class='resize'>Session B</div> </td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> </tr> <tr> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> <td draggable='true' class='drop'></td> </tr> </tbody> </table> </div> </body> </html>

CodePudding user response：

Take a look here. With jQuery. Looks like an elegant implementation.

Draggable, Movable and Resizable HTML DOM elements using jQuery