This module creates a Circle view just like Google Circles on your website.Users can add objects to the circles, view objects in each circle etc and has complete client side view and uses jQuery with Masonry and TweenLite plugin.
Best jQuery Drag & Drop Plugins & Tutorials with Demo
Shapeshift : jQuery plugin for dynamic grids with drag and drop
ShapeShift is a jQuery plugin which helps you to create a dynamic grid system with awesome multi-column drag and drop functionality.This jQuery plugin will dynamically arrange a collection of elements into a grid in their parent container.Inspired heavily by the jQuery Masonry plugin.
Another great feature is masonry installed so that when resizing ,the grid to accomodate for more or less space is automatically turned on in this jquery plugin, so if your parent container has a 100% grid resizing the window will shapeshift the child objects around to accomodate for the new layout.
Fancy Product Designer : jQuery plugin
Let me introduce the first Product Designer here on jQueryRain. You can use this plugin for any type of product. Use it as T-Shirt Designer, Business Card Designer, Device Designer….no limits!
You do not need any vectors files for the plugin, you just set png images for your elements and you tell the plugin which element can be colorized by the user. If its can be colorized, the image will be converted in a HTML5 canvas element.
Features:
- Converts png files in HTML5 canvas for colorization
- Let the user add custom texts to the product
- Add unlimited motives
- Colorizable elements by static colors or colorpicker
- Let the user drag, move, remove or rotate the element
- Great API to integrate it in any Shop System
- Add unlimited custom fonts to the font dropdown, you only need the woff file of your font
Drag ‘n’ Drop Shopping Cart With jQuery UI
Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.
It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).
For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial.
The Wall : A Javascript plugin for Mootools
The Wall is a plugin for Mootools javascript framework designed to create walls of infinite dimensions. Its flexibility allows different applications, from infinite wall mode to Coda slider mode. The Wall creates compatible interfaces with the newer browsers and iPhone and iPad mobile devices.
Features:
- Creation of endless walls
- Coda slider functionality
- Intelligent creation of tiles
- Widespread control of tiles
- Wall/Coda automatic ripositioning
- Inertia application to wall/coda motion
- Integrated slideshow
- Dragging reverse direction
- Speed personalization
- Motion transition personalization
- Toggle drag
- Mobile integration
jQuery Tagit Plugin
The jQuery Tagit Plugin transforms an html unordered list into a unique tagging plugin.
Features:
- Convenient way for users to enter a list of items
- Fully integrated with jQuery ui auto complete
- Automatically adds current input as tag if input loses focus
- Easy to use public methods
- Easy to theme (single css file)
- Customizable trigger keys
- Backspace on empty input deletes previous tag
- Ability to provide initial tags on creation though options
- Ability to provide initial tags on creation via list items
- Option to toggle usage of a hidden select so the tags can be sent using a normal form!
- Ability to re-arrange tags by drag and drop!
- Optional ThemeRoller compatibility!
- Fully HTML5 Data-attributes compliant!
jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML
jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).
FileDrop : Cross-browser JavaScript Drag & Drop file upload
FileDrop is a lightweight JavaScript class for easy-to-use file uploading that works out of the box.Self-contained cross-browser pure JavaScript class for Drag & Drop and AJAX (multi) file upload.
Features:
- Cross-browser – supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, SRWare Iron 4, Apple Safari 5 and Opera 11.61.
- Self-contained & tiny – just 470 lines of code; 8 KiB when minified, 3.5 KiB when gzipped.
- Various callbacks – on progress, on done, on error and on many other events.
- Graceful degradation using IFrame fallback.
- Multiple file selection.
- Any number of independent FileDrops.
