Quantcast

15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities

Sun, Jan 24, 2010

Development, Javascript

drag and drop jquery plugins

Like most others with a great interest in web front end development jQuery have a special place in my heart. jQuery manages to brings the real goodies to us with only a few lines of code and every day it gets better. This is because the huge jQuery community keeps shipping awesome plugins; great thanks to everyone contributing!. With jQuery it is possible to create user friendly and sophisticated web user interfaces in a lightweight and elegant way. One of the most important aspects of creating good user interfaces is taking care of the user events; like fx. user dragging stuff around on the page. Typically in web development this has not been trivial at all but with jQuery the dark clouds are gone. This post give you 15 jQuery Plugins that will give you the poser to add Drag N’ Drop capabilities to you web front ends.


$.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.

drag and drop jquery plugins

(mb)ConteinersPlus

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

drag and drop jquery plugins

resizable

With this plugin you can resize your DOMs in a easy way!

$('.resizeDiv').resizable({
handler: '.handler',
min: { width: 300, height: 150 },
max: { width: 500, height: 400 },
onResize: function(e) {
state.html('target style: {width: ' +
e.data.resizeData.target.css('width') + ', height: ' +
e.data.resizeData.target.css('height') + '}');
},
onStop: function(e) {
$('#state').html('stopped');
}
});

drag and drop jquery plugins

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.

drag and drop jquery plugins

ppDrag

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI’s Draggable. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance).

drag and drop jquery plugins

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.

drag and drop jquery plugins

jQuery File Tree Aza’s revised version

Modified version of http://abeautifulsite.net/notebook/58 to include drag’n'drop, callbacks and other stuff.

drag and drop jquery plugins

Dragscrollable

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.

drag and drop jquery plugins

dragndrop

Get Drag and drop in a easy way.

drag and drop jquery plugins

Collidable Draggables

Adds collision detection to draggable objects.

Add “collide: ‘block’” or “collide: ‘flag’” when you create a draggable:

$(".box").draggable({collide: 'flag'});
or
$(".box").draggable({collide: 'block'});

In ‘flag’ mode overlapping objects receive new classes – ‘ui-draggable-overlapping’ for the object being dragged and ‘ui-draggable-overlapped’ for the other object. In ‘block’ mode objects are blocked from overlapping other objects by being snapped to the edge of the object they collided with.

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.

drag and drop jquery plugins

jQuery List DragSort

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

drag and drop jquery plugins

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.

drag and drop jquery plugins

(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.

drag and drop jquery plugins

$().mapbox

Mapbox is a plugin for creating zooming, draggable maps of limited size and depth, which have a defined boundary. It has many methods such as the ability to center the map on any given point, zoom in or out, zoom to any particular level, and move in any direction. All of these may also be accomplished either by dragging the map or with the mousewheel in conjunction with the mousewheel plugin.

drag and drop jquery plugins

Related posts

  1. 17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements Having full control of elements on a page and...
  2. 15+ jQuery Plugins to Create Stunning Image Zoom Effects jQuery is amazing and you can find plugins to...
  3. 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables Most people have turned their back to tables for implementing...
  4. 5 New jQuery Plugins I bet You have not seen before jQuery is very popular and there’s a lot of...
  5. 15 Really Awesome and Totally New jQuery Plugins There are plenty of plugins for jQuery addressing nearly...

Please subscribe to tripwire magazines rss feed

Please remember to share this post!

4 Comments For This Post

  1. Bits Says:

    wow.. really nice article.
    already bookmarked. Thanks for the info.
    Here is a simple article to do resize/drag using normal jquery ui.
    http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html

  2. Danie Nowak Says:

    Nice article, i created my self a jQeury Plugin, which creates a draggable and resizable sticky notes container. Like the programm sticky notes on a mac.

    You find it here: http://jquery-sticky-notes.com

    Best Regards

    Daniel

  3. Elena Says:

    Thanks. It was easy to understand this material. I am waiting for new information about this theme.

  4. Thomas Craig Consulting Says:

    Nice list, thanks for sharing. Have only used JQuery drag’n'drop on one project so far, but made the users experience that more pleasant. It is great for admin UI’s that manage photos/folders/ or files.

19 Trackbacks For This Post

  1. 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … Web Me Says:

    [...] posted here: 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … tags: apple, apple-event, creating-good, the-most, the-user, twitter, twitter-features, [...]

  2. 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … | Drakz Free Online Service Says:

    [...] post: 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … Share and [...]

  3. 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … Says:

    [...] the rest here: 15 jQuery Plugins Giving Web Interfaces Drag 'N Drop Capabilities … Posted in Web | Tags: and-elegant, create-user, creating-good, friendly-and, [...]

  4. 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | Afif Fattouh - Web Specialist Says:

    [...] Feed provided by tripwrire magazine, Visit this post here: Permalink [...]

  5. Tweets that mention 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine -- Topsy.com Says:

    [...] This post was mentioned on Twitter by Louis Gubitosi, Ron Williams, kovshenin, Suhd.com Downloads, 2expertsdesign.com and others. 2expertsdesign.com said: 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities http://bit.ly/5ikJux [...]

  6. Tweets that mention 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine -- Topsy.com Says:

    [...] This post was mentioned on Twitter by Esteban Saavedra and jayQuery, brouilly mathias. brouilly mathias said: 15 #jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities http://bit.ly/90maUa [...]

  7. links for 2010-01-25 | AndySowards.com :: Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster? Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine Great plugins to do the coolest effect in my opinion – Drag 'N Drop! (tags: jquery plugins javascript links webdev plugin google interface draganddrop drag&drop) [...]

  8. 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine | Squico Says:

    [...] In: JQuery plugins 26 Jan 2010 Go to Source [...]

  9. 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazinetripwiremagazine.com [...]

  10. 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine « Brandontruong’s Weblog Says:

    [...] } via tripwiremagazine.com Leave a [...]

  11. 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine : Popular Links : eConsultant Says:

    [...] the rest here: 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine 24 January 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next [...]

  12. 15 plugins jQuery pour insérer du drag’n drop dans vos UI Says:

    [...] 15 plugins jQuery pour insérer du drag’n drop dans vos UI [...]

  13. Linkjes voor January 26th Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazin… [ jquery plugins draganddrop ] Comments [0]Digg it!Facebook [...]

  14. links for 2010-01-26 « Mandarine Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities  (tags: webdesign webdev ajax jquery plugin ux) [...]

  15. links for 2010-01-26 « Stand on the shoulders of giants Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities | tripwire magazine (tags: jquery plugins) « links for 2010-01-25 [...]

  16. IT???? | 2010?1/24?1/30????????? Says:

    [...] ??????????????????????15? [...]

  17. 15 jQuery Plugins Giving Web Interfaces Drag N’ Drop Capabilities | TopRoundups Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag N’ Drop Capabilities Submitted by lvraa [...]

  18. 17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements — iooo Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities Like most others with a great interest in web… [...]

  19. 17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements : Web Lime – Design and IT blog Says:

    [...] 15 jQuery Plugins Giving Web Interfaces Drag ‘N Drop Capabilities Like most others with a great interest in web… [...]

Leave a Reply