Best jQuery Drag & Drop Plugins & Tutorials with Demo

HTML5 Drag And Drop To Create A Shopping Cart

HTML5 Drag And Drop To Create A Shopping Cart

The release of HTML5 introduced native Drag and Drop functionality to modern web-browsers. This means it is now possible to have movable elements on screen without the aid of frameworks like jQuery. This week we’ll be taking advantage of the drag and drop functionality to create a basic shopping cart. The basic functionality we’ll cover, will be adding an item to the cart and if it already exists updating the quantity and totals.

Puzzllerry : Interactive jQuery gallery plugin

Puzzllerry : Interactive jQuery gallery plugin

Puzzllerry is plugin that allows you to create interactive gallery/portfolio/menu or any element with listed items. It has extremly simple markup and requires only 1 line of js code to turn it on.It will make your website more attractive, it will gain some focus of your visitor as user may ‘play’ with it.

And of course its responsive.

jQuery T-Shirt Designer

jQuery T-Shirt Designer

T­shirt Designer is the tool you have been looking for! You can create now your own t­shirt generator directly on your website. Works with any kind of product and can be integrated in minutes.

Features:

  • Add unlimited shapes, images and texts
  • Let the user add custom texts to the product
  • Colorizable Text using colorpicker
  • Change the Color, Size and font of the Text
  • Let the user drag, move or remove Elements
  • Google font API Loader
  • Add unlimited custom fonts from google Font or other services
  • Users can upload their own design image or logo to print on t-shirt
  • Shows Preview of the T-shirt as designed
  • users can Choose there favorite Tshirt Color from collection
  • Export Tshirt design as PNG, BMP or JPG
  • Prind Tshirt Design

jQuery.touchdragh : Makes elements Draggable horizontally by Touch

jQuery.touchdragh : Makes elements Draggable horizontally by Touch

This makes elements draggable horizontally by touch.

  • touchdragh: demo
  • touchdragh with transition: demo
  • touchdragh forever option: demo
  • touchdraghfitty: demo
  • touchdraghfitty with transition: demo
  • touchdraghsteppy: demo
  • touchdraghsteppy with transition: demo
  • touchdraghsteppy refresh method: demo
  • touchdraghsteppy forever option: demo
  • touchdraghsteppy normalize_height option: demo
  • touchdraghsteppy unsteppify: demo
  • touchdraghsteppy unsteppify manually slide: demo
  • dragger option: demo

with Media Queries using $.ViewportWatcher

  • touchdraghsteppy media queries example: demo
  • touchdraghsteppy media queries example2: demo

Formbuilder.js : Graphical Interface to build Webforms

Formbuilder.js : Graphical Interface to build Webforms

Formbuilder is a graphical interface for letting users build their own webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

As of right now, Formbuilder only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users’ responses is all up to you. I’m planning on releasing a Rails gem to handle this logic, but the ETA on that is pretty up in the air. If you’d like to help, feel free to reach out.

udraggable.js : jQuery plugin to make elements draggable by mouse or touch

udraggable.js : jQuery plugin to make elements draggable by mouse or touch

This plugin provides an API similar to jQueryUI’s draggable but with support for unified mouse and touch events.  It aims to provide a minimum useful subset rather than attempting to clone the full range of behaviours supported by jQueryUI. However some of the limitations can be worked around quite simply.

The udraggable plugin allows you to make elements draggable with a single line of code and to use a declarative syntax to define the constraints of the dragging behaviour.

Gridly : jQuery plugin to enable drag and drop & resizing on a grid

Gridly : jQuery plugin to enable drag and drop & resizing on a grid

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the demo below try tapping or dragging any of the bricks.

jQuery Horizontal Gridfolio Pro

jQuery Horizontal Gridfolio Pro

Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.

Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.

Features:

  • Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
  • Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
  • Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
  • Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).

jQuery Draggable Background

jQuery Draggable Background

A jQuery plugin for draggable background images.Their are 3 types of different draggable effect with this plugin.

Draggabilly : JavaScript Make that shiz draggable

Draggabilly : JavaScript Make that shiz draggable

Make that shiz draggable with this plugin.Rad because it supports IE8+ and multi-touch.



Best jQuery websites design awards