My friend kept challenging me about jQuery UI Sortable and my implementation of KendoUI Sortable Lists. He asked me to go a step further and implement a Sortable Grid that would allow to move cells in horizontal and vertical.
KendoUI Sortable Grid
KendoUI Sortable Grid: See it in action
I think that the very best is see what it can do:
But, it does not actually to be a regular grid (all cell with the same width):
Not even just static content elements, they might be other KendoUI widgets:
KendoUI Sortable Grid: Description
Basically you define an HTML element that contains group of HTML elements (rows). Each row contains a list of HTML elements (cells).
So, this widget is able to:
- Move a cells inside a row or between rows.
- If a row gets empty (no cells on it after a move), then the row is removed.
- If you drop a cell in the space between rows (in the videos it has been styled as box in slightly darker border), then a new row is inserted with the element being dragged.