Download
jQuery.shapeshift is a jQuery plugin that creates dynamic, Pinterest-style column grid layouts with drag-and-drop functionality and predictable indexing for each item. Rearrange items within a container or even drag items between multiple Shapeshift-enabled containers. Dragging elements around will physically change their index position within their parent container. When a page reloads, as long as the child elements are placed in the correct order, then the grid will look exactly the same. Shapeshift uses jQuery UI Draggable/Droppable for help with the drag and drop system. Luckily, there is already a plugin called jQuery Touch Punch, which provides touch support for jQuery UI D/D. It can be found in the vendor folder.
Features
- Arranges elements into column-based grid layouts similar to Pinterest
- Enables drag-and-drop repositioning of grid items while maintaining logical order
- Renders consistently given the same element order
- Compatible with jQuery-driven projects
- Lightweight plugin with CoffeeScript origins
- Maintainers track bug reports and feature requests via GitHub issues
Project Samples
