jQuery Drag & Drop Plugin & Tutorials with Example

Guillotine : jQuery Image Crop Zoom Rotate Plugin

Guillotine : jQuery Image Crop Zoom Rotate Plugin

Guillotine is a jQuery plugin that allows to drag, zoom or rotate an image to select a cropping area. Like selecting the display area of a profile picture or avatar.

  • Responsive: The window (or selection area) is fully responsive (fluid).
  • Touch support: Dragging the image also works on touch devices.

Draggable Metro App Showcase with CSS3

Draggable Metro App Showcase with CSS3

Today I’d like to share with you an interactive and touch-optimized metro app showcase concept for showcasing a metro (probably a Windows Phone) app screenshot. The screenshot will be draggable and swipable, and you’ll have a couple of extra options to view how the app would look like in a mobile phone frame.

Collections : Drag and Drop jQuery collection Add-on

Collections : Drag and Drop jQuery collection Add-on

Drag and Drop jquery collection add-on for ecommerce site.

HTML Builder with jQuery & Bootstrap

HTML Builder with jQuery & Bootstrap

HTML Builder is a nifty little Javascript application which allows end-users to easily compose custom HTML designs using pre-defined HTML elements. The HTML Builder script comes with several sample HTML elements (the ones as displayed in the live demo), however the script really shines when used with your own custom HTML elements!

Features:

  • build custom HTML pages using predefined HTML elements
  • create your own custom HTML elements with ease
  • integrates seamlessly with CSS frameworks (like Bootstrap, Foundation, etc)
  • create multiple pages in one session
  • export the created pages (incl CSS, Javascript and images)
  • basic editing of written content (only available for non IE browsers)

Drag and drop form builder using bootstrap

Drag and drop form builder using bootstrap

I was working on a web survey type of project with a requirement that admin users should be able to build forms on the go, which will then be displayed to user to fill up and submit. while browsing i came across this nice script Formbuilder.

drag and drop form builder is simply a interface to build your own web forms, On each move it generates json output which you can use to rebuild the html form at run time.

Slip.js : UI library for manipulating lists via Swipe and Drag gestures

Slip.js : UI library for manipulating lists via Swipe and Drag gestures

A tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies.Supports iOS Safari, Firefox Mobile, Chrome Mobile, Opera Mobile (Presto and Blink).

Draggable Dual-View Slideshow with JavaScript

Draggable Dual-View Slideshow with JavaScript

An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.There are different techniques that would allow for such a layout; we tried to re-create this slideshow concept by using the Dragdealer.js library and 3D transforms. The main idea is to translate the slider on the Z axis, allowing it to be either fullscreen or of a smaller carousel size. By switching the actual size of the slideshow and removing the transforms when they are not needed anymore, we allow the slideshow to have a “real” size (i.e. 25% of the window). For the content part, we slide everything up and reveal a scrollable area.

jsPanel : jQuery Floating Panels plugin for Bootstrap

jsPanel : jQuery Floating Panels plugin for Bootstrap

jsPanel for bootstrap is basically the same as jsPanel but optimized for use in a bootstrap environment. In general this means that jsPanel for bootstrap makes use of native bootstrap components in order to adapt to the used bootstrap theme.

Touch-dnd : jQuery Touch compatible Drag’n’Drop library

Touch-dnd : jQuery Touch compatible Drag'n'Drop library

Advanced touch-compatible Drag’n’Drop library providing Draggable, Droppable and Sortable for Zepto.js and jQuery.

jQuery Gridmanager : Building Rows and Grids

jQuery Gridmanager : Building Rows and Grids

jQuery GridManager is a way of building rows and grids with built in editable regions.Requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor.



Best jQuery websites design awards