Gridster is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid.
Best jQuery Drag & Drop Plugins & Tutorials with Demo
EasyBox is a lightbox clone based on the light-weight Slimbox2 script. It offers a variety of additional features such as:
- displaying YouTube and Vimeo videos,
- displaying inline content,
- displaying iFrames and
- better animations
EaselJS is a library to make working with the Canvas element easier. It provides a display list to allow you to work with display elements on a canvas as nested objects. It also provides a simple framework for providing shape based mouse interactions on elements in the display list. This is useful for games, generative art, and other highly graphical experiences.
Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens. If you’re familiar with the way WordPress allows the user to manage menus, this will be used for a similar UI.Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin).
These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn’t fit the entire product in without shrinking the image down until it was too small. Owen’s solution was to have a small thumbnail preview that you could drag over to view different sections of a larger image.
Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.
Today, i am going to show you how to create collapsible, drag and drop panels easily using jQuery and jQuery UI libraries. Here’s what the final result will look like.
Custom events ‘movestart’, ‘move’ and ‘moveend’ for jQuery.Move events provide an easy way to set up press-move-release interactions on mouse and touch devices.
Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making responsive interfaces. That said,
moveend events deliberately echo
dragend events, with one significant difference: where the
drag event fires continuously whether you have moved the pointer or not, the
move event fires only after the pointer has been moved.
I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product.
DynoTable makes an html table editable. With it you can:
- Add rows
- Remove rows
- Clone rows
- Click and Drag to Re-arrange rows (If you have Jquery UI included on
The dynoTable defaults will probably handle most use cases. If you do not require any of the functionality it provides, you can simply omit the classes from your table. However, dynoTable also provides a number
of properties and callback functions to configure it further if needed.
nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.
- Designed to work seamlessly with the nested set model (have a look at the
- Items can be sorted in their own list, moved across the tree, or nested under other items.
- Sublists are created and deleted on the fly
- All jQuery Sortable options, events and methods are available
- It is possible to define elements that will not accept a new nested item/list
- It is possible to define a maximum depth for nested items
jQuery.kinetic is a simple plugin which adds smooth drag scrolling with gradual deceleration to containers.Add kinetic scrolling functionality to a container using mouse or touch devices.Drag a mouse or use touch gestures over the windows below to scroll the pane. If you let go with momentum the scrolling will slow gradually.