jQuery Shapeshift - A Plugin To Dynamically Elements Into A Grid

jQuery Shapeshift is a jQuery plugin which will dynamically arrange a collection of elements into a grid in their parent container. It is inspired heavily by the jQuery Masonry plugin and is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins.

Features

• Responsive Grid - Resizing the grid to accommodate for more or less space is automatically turned on in Shapeshift, so if your parent container has a 100% grid resizing the window will shapeshift the child objects around to accommodate for the new layout. You can even set CSS3 media queries on your objects and watch as they get shapeshifted around their new size!
• Drag And Drop - Position any item within the grid by dragging and dropping them into place. Shapeshift will try to find a logical place for it and display that to you. Coming soon is the ability to drag and drop between multiple containers.
• Works On Touch Devices - To have the drag and drop functionality on touch devices you must include the "jquery.ui.touch-punch.min.js" file within the vendor folder. jQuery touch punch extends the jQuery UI Draggable library with touch support, so it must be included before Shapeshift and after the jQuery UI library.

Requirements: jQuery
Demo: http://mcpants.github.com/jquery.shapeshift/
License: MIT License

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: