jQuery Plugins To Create Drag and drop feature

Table row drag and drop

Drag and drop table rows to reorganise data. onDragStart and onDrop config options allow you to integrate this with Ajax calls to update the server.Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

Home page Link- http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

------------------------------------------------------------------------------------------------------------------------

$.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. For people who plan a drag interaction model and decide how to set up pages and position elements, and don't need a script to figure that out...

Home Page Link- http://threedubmedia.com/demo/drag/

------------------------------------------------------------------------------------------------------------------------

(mb)ConteinersPlus, a jQuery component for full customizable and featured container layout (DIV box model)

Here it is!
Finally I realized the DIV box model of the (mb)Containers!

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.

demo and doc: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/

-------------------------------------------------------------------------------------------------------------------

(mb)ImgNavigator, a photo gallery for extralarge images!

A photogallery for extralarge images with navigator.
You can drag your extralarge image in the display by the navigator or the image itself.
Enjoy yourself into images!

demo page: http://pupunzi.wordpress.com/2009/01/20/mbimgnavigator/

You can navigate your image either dragging the big one or dragging the navigator into the thumbnail; if you want to see all the image in the display just doubleclick on the image or on the navigator; to restore the view doubleclick again.
That's all; Enjoy yourself!

---------------------------------------------------------------------------------------------------------------------

Draggable Images

Currently, most draggable image plugins use an inline image with absolute positioning and a surrounding clipping area, which in most cases is fine, but in this case it would be a real issue as the zoom plugin uses an absolute positioned container. To get around this I decided to convert the image inside the container to the background image.

For all those people who don't have javascript turned on you just see a clipped image, but those with javascript can move the background image around as if they are dragging it.

Demo Page-http://tinyjs.com/files/projects/jquery-image-dragging/index.html

--------------------------------------------------------------------------------------------------------------------

Easy Widgets

After I read How to Mimic the iGoogle Interface tutorial, I think that is a very simple way to use Widgets in one of my projects: Gesbit, you can see here a demo. I study the tutorial code and want to put into a jQuery plugin. After some work I finally use this plugin in Gesbit and think that maybe can be useful for other developers.

The plugin as been tested in last version of Firefox, Opera, Internet Explorer, Safari, Konqueror and Chrome browsers. Please try the examples for more details.

For more information and download - http://www.bitacora.davidesperalta.com/archives/projects/easywidgets/

----------------------------------------------------------------------------------------------------------------------

jQuery Flick

This plugin adds Apple iPod/iPhone (firmware 2.0+) flick/scroll functionality to jQuery. Use built in Touch methods including ontouchstart, ontouchend and ontouchmove.

Includes rubber banding if the user scrolls past the top/bottom of the scrollable region. There is also an internal division ontouchstart to place over any clickable elements. This prevents items that are in the scrollable region from being clicked while you are in mid scroll.

Written By: Peter Schmalfeldt ( Manifest Interactive )

Demo page-http://www.manifestinteractive.com/iphone/flick/

----------------------------------------------------------------------------------------------------------------------