All posts in Drag & Drop

Drag ‘n’ Drop Shopping Cart With jQuery UI

December 3, 2012 | Drag & Drop, jQuery UI
jquery-drag-drop-shopping-cart

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.

Read More Demo
  1 Like?

The Wall : A Javascript plugin for Mootools

October 25, 2012 | Drag & Drop, Gallery, Other Libraries, Slider
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
Read More Demo
  2 Like?

jQuery Tagit Plugin

September 2, 2012 | Drag & Drop, jQuery UI, Plugins, Web
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!
Read More Demo
  2 Like?

jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

August 27, 2012 | Animation, Chart & Graph, Drag & Drop, Plugins, Web
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).

Read More Demo
  5 Like?

Mapbox: Zoomable jQuery Map Plugin

August 20, 2012 | Drag & Drop, Maps, Plugins, Zoom
Mapbox: Zoomable jQuery Map Plugin

The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view.

Read More Demo
  0 Like?

FileDrop : Cross-browser JavaScript Drag & Drop file upload

August 18, 2012 | Ajax, Drag & Drop
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.
Read More Demo
  2 Like?

HTML5 Sortable : jQuery plugin to create sortable lists and grids

August 13, 2012 | Drag & Drop, HTML5, Plugins
HTML5 Sortable : jQuery plugin to create sortable lists and grids

HTML5 Sortable is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

Features :

  • Less than 1KB (minified and gzipped).
  • Built using native HTML5 drag and drop API.
  • Supports both list and grid style layouts.
  • Similar API and behaviour to jquery-ui sortable plugin.
  • Works in IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+.
Read More Demo
  1 Like?

Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

August 10, 2012 | Drag & Drop, HTML5, Web
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery

Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user.

Read More Demo
  2 Like?

gridster.js : jQuery plugin for building intuitive draggable layouts

August 1, 2012 | Drag & Drop, Plugins, Web
gridster.js : jQuery plugin for building intuitive draggable layouts

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.

Read More Demo
  2 Like?

Easybox : lightbox clone for jQuery

July 25, 2012 | Drag & Drop, Media, Plugins, Windows & Overlay
Easybox : lightbox clone for jQuery

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
Read More Demo
  1 Like?

12345...Last »


Best jQuery websites design awards