All posts in Drag & Drop

EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

June 29, 2012 | Animation, Core Java Script, Drag & Drop, HTML5

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.

EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

Read More Demo

0 Like?

Nestable jQuery Plugin

June 25, 2012 | Drag & Drop, Plugins

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).

Read More Demo

0 Like?

Collapsible Drag & Drop Panels Using jQuery

June 12, 2012 | Drag & Drop

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.

Read More Demo

0 Like?

dynoTable: A jQuery plugin for creating editable tables

June 7, 2012 | Drag & Drop, Tables

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
your page)

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.

Read More Demo

0 Like?

nestedSortable jQuery plugin

June 6, 2012 | Drag & Drop, Plugins

nestedSortable is a jQuery plugin that extends jQuery Sortable UI functionalities to nested lists.

Features:

Designed to work seamlessly with the nested set model (have a look at the toArray method)
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

Read More Demo

0 Like?

jQuery.kinetic : Smooth Drag Scrolling

May 31, 2012 | Drag & Drop, Plugins

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.

Read More Demo

1 Like?

Redactor : Fantastic WYSIWYG-editor on jQuery

May 23, 2012 | Drag & Drop, Other API, Web

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.

Read More Demo

0 Like?

elFinder : jQuery File manager for web

May 17, 2012 | Drag & Drop, HTML5, jQuery UI, jSON, Plugins, Web

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. Creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

Features:

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