Best jQuery Drag & Drop Plugins & Tutorials with Demo

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.

dragend JS : jQuery plugin for content swiping

dragend JS : jQuery plugin for content swiping

dragend JS is a swipe plugin for jQuery. It’s open source and uses hammer.js for observing multi-touch gestures.

Features:

  • horizontal and vertical swiping
  • mobile and desktop ready
  • lightweight (1.55KB gzipped)
  • keyboard navigation
  • fullscreen or boxed
  • contend scribe
  • resize adjustment
  • overscroll

DROPAREA : jQuery Html5 drag-drop file uploader plugin

DROPAREA : jQuery Html5 drag-drop file uploader plugin

droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).

Originally it has:

  • client-side image resizing with canvas on browser option
  • data url option for sending a file/image as a text field with ajax
  • click event for browsing files

zTree : jQuery Tree Plugin

zTree : jQuery Tree Plugin

zTree is a multi-functional “tree plug-ins.” based on jQuery. The main advantages of zTree includes excellent performance, flexible configuration, and the combination of multiple functions.

Features:

  • The code of zTree v3.x has been seperated according to the various functions. You can only load the code you need.
  • zTree v3.x uses delay loading technique, which can easily load tens of thousands of nodes in seconds even in IE6 browser.
  • Support for JSON data.
  • Support for static and asynchronous data loading node.
  • Replace the skin / custom icon flexibllly.
  • Support extremely flexible checkbox or radio selection function.
  • Flexible editing (add / delete / change / search) functions, such as drag and drop nodes,you can even drag and drop multiple nodes.
  • To enhance performance, zTree transforms the js & css structure to provide excellent browser compatibility and make the development more easily


Best jQuery websites design awards