Saturday, July 23, 2011

Simple jquery drag-and-drop tutorials

Dragging and dropping can be a very intuitive way for users to interact with your site or web app. People often use drag-and-drop for things like:

Moving email messages into folders
Reordering lists of items
Moving objects in games around, such as cards and puzzle pieces

Drag-and-drop with JavaScript used to be very hard to do — in fact, getting a decent cross-browser version working was next to impossible. However, with modern browsers and a smattering of jQuery, drag-and-drop is now a piece of cake!

In this tutorial we'll take a look at how to create drag-and-drop interfaces with jQuery.


How to use : http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

Demo 1 - Making elements draggable
Demo 2 - Adding draggable options
Demo 3 - Using a helper
Demo 4 - Events: Responding to drags
Demo 5 - Styling draggable elements
Demo 6 - Droppables: Accepting draggable elements
Demo 7 - Complete example: A drag-and-drop number cards game

No comments:

Post a Comment