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).
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.
You must have noticed – a stylish editor. He looks equally well in any interface on any website. Are we wanting more, if the editor is already falling in love with his chosen interface?Inside you will find a clear, logical code. A good API. Customization available. All the tools to customize the editor for their needs. Be careful, your imagination can go a long way.
Drag a file from your computer out the window and insert a file, it immediately appears as a link directly to the text.Just drag the window and your image will already be in the editor.Clicking on any image editor, you can easily configure whether text wrap around the picture on the right or left.
- All operations with files and folders on a remote server (copy, move, upload, create folder/file, rename, etc.)
- High performance server beckend and light client UI
- Local file system, MySQL, FTP volume storage drivers
- Background file upload with Drag & Drop HTML5 support
- Standard methods of file/group selection using mouse or keyboard
- Move/Copy files with Drag & Drop
- Archives create/extract (zip, rar, 7z, tar, gzip, bzip2)
- Quicklook, preview for common file types
- “Places” for your favorites
- Calculate directory sizes
- Thumbnails for image files
- Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
- Flexible configuration of access rights, upload file types, user interface and other
- Simple client-server API based on JSON
An iGoogle like drag and drop portal based on Prototype and Scriptaculou.