We have collected the best tutorial of jquery drag drop from internet.
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.
The ability to drag and drop content on a page and have it save the order can make for a great user interface and is actually relatively easy to execute with a few lines of jQuery. You’ll need to include the jQuery user interface library which you can find here: Jquery Google API. All the files needed to get this up and running are in the download at the bottom of this post.
Some time ago, I needed to take a list of items and select from them a subset, put that subset of items into a particular order, and then submit them to the server. A good example would be when you have a list of posts and you need to choose which ones (and in which order) you want to print them. Drag and Drop is a breeze with jQuery and jQuery UI.
I’ve recently made use of a drag / drop style list that will remember the order of the list. If you use the standard jQuery sortable items, you’ll get the two following problems:
- You won’t be able to click on any items in the sortable list you have
- You’ll probably want an update of the order of the list after every change.
Amazed by features like drag and drop, customizable content and AJAX? Learn how you can combine them to create a customizable website layout, saving preference using cookies.
Wanna cut to the chase? Check out the final example or download them all.
This tutorial explains how to display a list of items from a database that can be reordered in real time by dragging and dropping, using the jQuery library. Moreover, no page reload is required on every reorder. If you want a bigger introduction to why you may want to do this I suggest reading my tutorial on how to achieve the same functionality using scriptaculous.
I just finished off a nice interface where an arbitrary amount of nested lists are used to represent a tree. Any item can be dragged and dropped on any other item as a way of moving them and placing them as children beneath another item/branch. The functionality mimics that of any file browser that can display folder structures as a tree.