In a nutshell, the droppables component of jQuery UI gives you a place for drag objects to be dropped. A region of the page is defined as a droppable and when a drag object is dropped onto that region, something else is triggered. You can react to drops on a valid target very easily using the extensive event model.
Let's start with the default droppable implementation. In a new file in your text editor, add the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/droppable.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Droppable Example 1</title> </head> <body> <div id="drag"></div> <div id="target"></div> <script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script> <...