Hi everyone!
I’m looking for help with implementing drag and drop functionality for table cells using JavaScript. The tricky part is that my table cells have different column spans, which makes things complicated.
Here’s what I need to happen when someone drags a cell and drops it onto another cell that’s wider:
- A new table cell should be created that matches the width of the cell being dragged.
- The cells to the left and right of this new cell need to resize themselves automatically.
Right now I’m using a jQuery drag and drop plugin but it’s getting messy when I try to modify the DOM elements in the drop target area. The plugin handles the dragging part fine but doesn’t help much with the complex table manipulation I need.
Does anyone know of a JavaScript library that can handle this type of table cell rearrangement? I’d really appreciate any suggestions or alternative approaches to solve this problem.
Had the same issue last year. I ditched the libraries and built something custom using HTML5’s drag and drop API. Most libraries suck at handling dynamic colspan changes. Here’s what worked: I calculate target cell dimensions during dragover and drop in temporary placeholders to show where stuff will land. On drop, I recalculate colspan values for the affected cells and rebuild that part of the table row. More work upfront, but you get full control over how the table structure changes. The native API’s visual feedback is actually pretty solid once you nail the event handlers.
Check out GridStack.js - it’s built for dashboards but might work. I had the same table drag nightmare six months back and went hybrid instead. Used Dragula for dragging but wrote my own table resizing logic. Game changer was treating each drag as a full table rebuild instead of trying to modify cells on the fly. When something drops, I grab the current state, yank the cell from where it was, then rebuild the target row with proper colspan math. Sounds heavy but it’s fast since you’re only touching affected rows. The colspan redistribution math is a pain to get right, but once you crack it, it handles edge cases way better than trying to hack existing libraries.
have u checked out SortableJS? it’s pretty flexable for what u need and can handle the DOM stuff. just keep in mind u might have to write some custom functions for the colspan part. good luck!
This topic was automatically closed 6 hours after the last reply. New replies are no longer allowed.