Best jQuery Drag & Drop Plugins & Tutorials with Demo

Creative Upload Interaction with JavaScript & Canvas

Creative Upload Interaction with JavaScript & Canvas

Well in this tutorial we will see how to implement a creative component to upload files, using as inspiration the previous animation by Jakub Antalík. The Idea is to bring better visual feedback around what happens with the file after is dropped.

We will be focusing only on implementing the drag and drop interactions and some animations, without actually implementing all the necessary logic to actually upload the files to the server and use the component in production.

Scrollbooster : Enjoyable Content Drag-to-scroll library

Scrollbooster : Enjoyable Content Drag-to-scroll library

Scrollbooster is a enjoyable content drag-to-scroll micro (~2KB gzipped) library.

jQuery Multilevel Menu Editor with Bootstrap

jQuery Multilevel Menu Editor with Bootstrap

jQuery Menu Editor , is an HTML / Javascript tool for editing multilevel menus by means of a user-friendly interface.

Features:

  • Add, Update & Remove items from Menu
  • Multilevel Drag & Drop
  • Form Item Editor
  • Include IconPicker Plugin
  • Load data from JSON string
  • The output is a Json string

HQY Interact : Touch enabled jQuery Plugin

HQY Interact : Touch enabled jQuery Plugin

HqyInteract is a touch enabled jQuery plugin that lets you create powerful interactions.

PlainDraggable : JavaScript Library to Drag HTML/SVG Element

PlainDraggable : JavaScript Library to Drag HTML/SVG Element

PlainDraggable  is a simple and high performance library to allow HTML/SVG element to be dragged.

Features:

  • Accept HTML/SVG element as an element that comes to be draggable.
  • Restrict the draggable area.
  • Snap the draggable element to other elements, points, lines, consecutive points (i.e. grid) or something.
  • Use requestAnimationFrame API, translate and will-change CSS if possible, for high performance.

KEditor : jQuery Drag Drop Content Editor Plugin

KEditor : jQuery Drag Drop Content Editor Plugin

KEditor is a jQuery plugin which provides a content editor with drag and drop snippets.

Gijgo : Free Javascript Controls

Gijgo : Free Javascript Controls

Gijgo is a set of free open source javascript controls distributed under MIT License. All widgets are high performance, built on top of the jQuery JavaScript Library and with built-in support for Bootstrap and Material Design. They are designed to saves you time and scales with your development process.

HyperModel : jQuery Related Model Design Plugin

HyperModel : jQuery Related Model Design Plugin

Related model design plugin, It works with jQuery well. You can drag and swap each of grids and properties.

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader : Beautiful and powerful HTML5 File Uploading Tool

Fileuploader is a beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.

  • File preview with image thumbnail or icon
  • File image thumbnail can be generated in canvas to resize it perfectly for given with and height
  • Render synchron the file preview
  • File icon background is generated from file extension
  • Customize your own input and thumbnail elements
  • Responsive and fancy animations
  • Choose multiple files from different folders
  • Drag&Drop feature
  • Upload each file with Ajax
  • Upload synchron the files
  • Upload progressbar with many data available
  • Start, retry and cancel upload actions
  • Paste images from clipboard (only in Chrome)
  • Validate the file’s limit, size and extension. You can also use your own function
  • Edit mode for already uploaded files
  • All files are in one list in a hidden input
  • Use input HTML attributes to configurate it
  • HTML template renderer using Text variables
  • CSS file icon
  • PHP upload helper
  • PHP generates an array with many file informations
  • PHP can create a custom file name
  • API and more than 24 Callbacks to manipulate freely the appearance and functionality of your file input

Dragarrange : jQuery plugin to Arrange/Order DOM elements

Dragarrange : jQuery plugin to Arrange/Order DOM elements

A Basic jQuery library to arrange/order DOM elements by dragging.This plugin doesn’t require any CSS change, just call the function on elements you want to be arranged, and you are done.