jQuery Drag & Drop Plugin & Tutorials with Example

Interactive Drag and Drop Coloring Concept

Interactive Drag and Drop Coloring Concept

Today we would like to share a fun interactive coloring concept with you. The idea is to simply drag a color from a color palette to a website mockup and color designated areas of it (like sections or texts). You might have encountered customization tools before, but we wanted to add some fun to this idea and make it enjoyable to use.

Dragula : JavaScript Drag and Drop Library

Dragula : JavaScript Drag and Drop Library

Have you ever wanted a drag and drop library that just works? That doesn’t just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn’t need you to do a zillion things to get it to work? Well, so did I!

Features:

  • Super easy to set up
  • No bloated dependencies
  • Figures out sort order on its own
  • A shadow where the item would be dropped offers visual feedback
  • Touch events!

PivotTable.js : JavaScript Pivot Table, Chart, Grid Library

PivotTable.js : JavaScript Pivot Table, Chart, Grid Library

PivotTable.js is a Javascript Pivot Table library with drag’n’drop functionality built on top of jQuery/jQueryUI.

PivotTable.js’ basic function is to turn a data set into a summary table and then optionally add a true 2-d drag’n’drop UI to allow a user to manipulate this summary table, turning it into a pivot table, very similar to the one found in older versions of Microsoft Excel with a bunch of extra developer-oriented features and some visualization effects.

Dragscroll : JavaScript Drag Drop Scrolling Library

Dragscroll : JavaScript Drag Drop Scrolling Library

Dragscroll is a tiny javascript library (410 bytes minified) which enables scrolling via holding the mouse button (“drag and drop” or “click and hold” style).

GridList : jQuery Drag Drop plugin for Resizable list of Items

GridList : jQuery Drag Drop plugin for Resizable list of Items

jQuery Drag and drop library for two-dimensional, resizable and responsive lists.The current implementation is for a horizontal grid. This means that the number of rows is configurable, whereas columns extend dynamically, based on the number, size and position of items placed inside the grid.

Hello Form Builder with jQuery & PHP

Hello Form Builder with jQuery & PHP

With Hello Form Builder, you don’t need to a programmer or developer to create form. Everybody can create form without TECHNICAL KNOWLEDGE required. It has full of features that you need for your forms!

SVG Connectable.js : JavaScript library for connecting SVG

SVG Connectable.js : JavaScript library for connecting SVG

A JavaScript library for connecting SVG things.

Drag N’ Drop Form-builder for PHP

Drag N' Drop Form-builder for PHP

The Drag N’ Drop form builder provides an easy to use tool for creating an almost infinite configurations for end-user forms. Using the simplicity of drag-and-drop and user experience patterns available in most integrated development environments, you can customize forms in several ways.

 

  • Choose from 11 different draggable fields to create your form
  • Create custom themes easily
  • File-upload control with Amazon S3 cloud integration
  • Export registrant list to an excel spreadsheet
  • Customize required field validation
  • Add tooltips as a help-resource
  • Real-time updating

HTML5 Music Player with File Reader & Audio APIs

HTML5 Music Player with File Reader & Audio APIs

This time we want to share with you a cool experiment that we made. It is a music player that lives in your browser. It uses the powerful HTML5 File Reader and Audio APIs. As a result, you can just drag and drop mp3 files from your computer into the browser, and they are automatically added to your playlist.

jstree : jQuery Interactive Trees Plugin

jstree : jQuery Interactive Trees Plugin

jsTree is jquery plugin, that provides interactive trees.jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources, AJAX & async callback loading.

  • drag & drop support
  • keyboard navigation
  • inline edit, create and delete
  • tri-state checkboxes
  • fuzzy searching
  • customizable node types


Best jQuery websites design awards