This is the collection of drag and drop plugins.Drag and drop is a pointing action in which the user selects a virtual object by “grabbing” it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.
In website development or mobile app development drag and drop system is widely used especially in sorting boxes and file uploading.
Today we bring together free drag and drop jQuery plugins for your website projects.
Elastic Stack: Elastic Dragging Interaction
ElastiStack is a little script that let’s you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.
File Upload Form
Draggable Image Boxes Grid
A template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area.
Drag and Drop Newsletter Builder
jQuery drag and drop HTML builder – compile Bootstrap based HTML and JS. Builder extract required JS code (about 0% – 15%) from itself and provide it with resulting HTML to allow initialization a third party JS libraries on frontend. Generated HTML contain “data” attributes which store JS libraries settings and helpers to allow parse document structure by editor.
JQuery File Uploader
JQuery plugin to drag and drop files, including ajax upload and progress bar. The idea for this plugin is to keep it very simple; other options/plugins i found mess up a lot with the markup and provide some really ‘hacky’ ways to make it available for prehistoric browsers.
A jQuery plugin for selecting from a list of fields or values (the source) and adding them to a new list (the destination). You move fields from the source to the destination by dragging and dropping. Fields themselves can be simple HTML elements or more complex containers.