WEB DEV

ABOUT VISION WIDGET

Delivers a daily balance of inspiration across web design, graphic design, web development, jquery, photography, web plugins, wordpress themes, identity dranding design and more than for designers. If any images or content appear on site is violation or copyright please inform us on (visionwidget$gmail.com).

20 Free jQuery Drag And Drop Web Interfaces

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.

2. Collapsible drag and drop

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.

3. Jquery iviewer

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.

4. (mb)ImgNavigator

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.

5. Drag and Drop Captcha

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.

9. Drag scrollable

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.

15. jQuery.event.drag

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.

17. jQuery Iconize Plugin

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.

18. jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

19. Text With Drag N 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.

20. $.event.special.drag

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.

Sponsors Adverts

POPULAR Articles

Written on 24/07/2014, 09:59
For instance if you designed an awesome DVD cover you can take this DVD Plastic Case Free Template, and mockup your design and see how it would look in...
Written on 15/04/2014, 00:28
Here collection of logo mockups for free download will helpful save time for logo and graphical designers to making a new logo when inspiring ideas from...
Written on 08/04/2014, 00:04
A family of thirty precision-crafted vector glyphs. Elegant. Simple. Modern. The modern minimal glyphs were created as a humble set of icons...
Written on 17/04/2014, 10:59
If you are searching for free html5 and css3 responsive website templates to boost your website functionality, took a little extra time to see templates...
Written on 09/04/2014, 10:54
Brand identity in the pre-established brand positioning is very critical stage; only a clear positioning and consumers can have emotional side of the...
Written on 09/04/2014, 11:39
When we come to designing, we have to implement a lot of styling features. Whether it would be a logo design or any kind of poster making , efforts are...
Written on 09/06/2014, 07:07
The occupation of rocinha a notorious hillside "favela" that overlooks some of rio's swankiest areas is a crucial part of the city's preparations to...
Written on 07/04/2014, 23:13
With the following powerful and elegant jQuery notification plugins that easy to create alert,success,error,warning,information and confirmation...
Written on 11/06/2014, 08:24
Developing the logo design concept is where creativity comes into play, this is where the designer must create the logo by using the design brief and...

create-your-own-jquery-plugin

30 Best Examples of Free jQuery Content Sliders

jQuery developers and designers widely use content slider scripts to create various and flexible effects on the images.

30 jQuery Free Photo Albums with Tutorials

This post includes essential tutorials for photo galleries in many styles so they could perfectly fit your sites, running smoothly and seamlessly.

12 jQuery CAPTCHA Plugin with Tutorial

CAPTCHA is designed to recognize the difference between a bot and human and sometimes even malicious software to provide the security to your system.

new-photoshop-tutorials

60 Free Adobe After Effects Text Effects Tutorials

Whether you're a beginner, intermediate or expert, you're sure to find what you're looking for in our great collection of After Effects tutorials.

50 Autodesk 3DS Max Tutorials for Beginners

The list is composed of several Autodesk 3ds Max techniques that you may need to use in creating 3D graphics.

20 Adobe Fireworks Tutorials for Web Design

We have collected some useful and fresh tutorials on Adobe Fireworks including generating PDFs, exporting CSS based layouts.

full-template-with-cms-skins

60 Elegant Responsive Free Drupal 7/8 Themes

Showcase very modern and professional Free Drupal 7 theme giving your endless possibilities. All those Drupal 7 themes.

20 Fantastic Responsive Free Joomla 2.5/3 Templates

You’ll find best Latest Free Joomla! 2.5 and Joomla! 3 Templates Around because we’re going to use our blog as a tool to promote our business.

20 Response FREE Wordpress Themes Releases IN 2014

In this article I want to showcase best 20 free Response Wordpress blog themes released in 2014. I hope these themes will fit your needs.

jquery.min.js,jquery-noconflict.jsjquery.min.js,jquery-noconflict.js