20 Free jQuery Drag And Drop Web Interfaces
20 Free jQuery Drag And Drop Web Interfaces 3.8 out of 5 based on 5 votes.
jQuery manages to brings the real goodies to us with only a few lines of code and every day it gets better. With jQuery it is possible to create user friendly and sophisticated web user interfaces in a lightweight and elegant way.
jQuery Drag and drop feature is always grab the vistor attention and gives us very useful plugins, nd it can be handy when you’re running out of design idea. This post give you best jQuery Plugins that will give you the poser to add Drag and Drop capabilities to you web front ends. these plugins make your task more easy ans simple by just drag and drop elements from one side to other.
1. jQuery Customizable layout using drag and drop
includes using jQuery along with the jQuery UI Sortable plugin for drag and drop functionality and the jQuery Cookie plugin for storing item positions.
Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.
JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.
A photogallery for viewing very large images using a navigator map and drag. You can drag your large image in the display by the navigator or the image itself.
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.
6. Crop Zoom
CropZoom is a plugin that let you select an area of an image and then crop it.whit this tool you also will be able to zoom in or to zoom out, to drag and also rotate an image. this plugin needs ui.droppable, ui.resizable, ui.slider from JQuery UI to work.
7. jQuery UI multiple draggable plugin
The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group.
8. Everything Drag in HTML page small code
A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page.
Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging.
Can be used to build a similar effect as in Google maps where you drag contents of a div acting as a viewport.
10. How to Mimic the iGoogle Interface
In this tutorial, I’ll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications!
11. Drag & Drop with jQuery and PHP
Drag’n drop generally looks hard-to-apply but it is definitely not by using JavaScript frameworks. Here is, how it is done by using jQuery & jQuery UI:
12. Drag & Drop with PHP & jQuery
In this tutorial we’re going to be looking at 2 main PHP pages. the index.php page which contains the contents and functionality to perform the drag and drop and the updateList.php file which is a simple piece of code to update the listOrder column in the database using PHP and MySQL.
13. jQuery File Tree Aza’s revised version
Modified version of http://abeautifulsite.net/notebook/58 to include drag’n'drop, callbacks and other stuff.
14. NestedSortable
NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it.
The following examples are intended to show how the drag special events can be configured to acheive a wide range of features for any drag interaction. I have simplified each demo as much as possible, to really highlight the core of each feature.
16. TextArea Resizer
This project allows the user to extend the textarea element/area within the web page whenever they feel.
The jQuery iconizer plugin aims to be a stable, light-weight, cross-browser jQuery plugin to add iconizing functionality (the ability to be able to reduce an element to an icon state) to any HTML element.
A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.
I’ve got another real world example of how to use jQuery to enhance your website. A friend emailed me this morning wondering if it was possible to insert text using the click event or drag n’ drop into a textarea.
This is a jquery special event implementation of a drag event model. It is intended for use by developers who don’t need one bloated script full of idiot-proof logic and a million different options. This plugin simplifies handling drag events, by taking care of the DOM events when you bind a “drag” event handler, and triggering any other handlers at the appropriate time.
People Who Read This Article Also Interested IN:
20 Examples of HTML5 Video Player with Source
In this post is a list of 20 100% HTML5 based and do no
20 HTML5 Ebooks for Web Developers, Few Free Ebooks
In the technology market, here comes every day new an
360 Degree jQuery Panorama Plugins
Best free jQuery plugins and tutorials to create 360
Fluid Responsive Free HTML5 WordPress Themes
HTML5 is the next major version of HTML. HTML5 provid
Interactive jQuery Chart and Graph Plugins
This post offers free javascript libraries and jQuery
12 Photo Gallery And Slideshow use jQuery Plugins
jQuery is becoming present in more Web 2.0 sites. jQuer
REVIEWS:
