Best jQuery Drag & Drop Plugins & Tutorials with Demo

Draggable Menu with Image Grid Previews

Draggable Menu with Image Grid Previews

A draggable inline menu with a scattered thumbnail preview of an image grid.After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.

Propeller.js : JavaScript library to Rotate Elements by Mouse

Propeller.js : JavaScript library to Rotate Elements by Mouse

Propeller is a JavaScript library to rotate elements by mouse. Supports inertia and stepwise rotation. It is also compatible with touch devices.

JavaScript Lightweight Modern Drag & Drop Libarary : Draggable JS

JavaScript Lightweight Modern Drag & Drop Libarary : Draggable JS

Draggable is a modular drag & drop library, allowing you to start small and build up with the features you need. At its most basic, Draggable gives you drag & drop functionality, fast DOM reordering, accessible markup, and a bundle of events to grab on to.

Features:

  • Works with native drag, mouse, touch and force touch events
  • Can extend dragging behaviour by hooking into draggables event life cycle
  • Can extend drag detection by adding sensors to draggable
  • The library is targeted ES6 first

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.