Teach you the basics about jQuery "draggable" and "droppable" objects. This lesson will cover the drag, drop, and out events that occur while working with draggable and droppable elements in jQuery.
The jQuery UI package (script) is required to do drag and drop. Be sure you pull in the right packages (scripts) to use in your web pages. You can do a View->Source through your browser and copy and paste this entire page into a suitable HTML browser/editor so you can modify and explore this page and it's programming. You will have to download the latest jQuery files from http://jquery.com and http://jqueryui.com and modify the scripts that are being pulled into your own local pages else the page will not function properly.
The drop area is a div that has an id of "droppable" and the draggable smaller square is a div with an id of "draggable". So, in the code above, jQuery's way of referencing them is $("#droppable") and $("#draggable").
What we do in the scripting in a nut shell is program what happens when the draggable div is dragged (and the "drag" event fires), what happens when the drop area div is dropped on (and a "drop" event is fired), and what happens when we slide the draggable div away from the drop area and the "out" event is fired by the droppable area...
The goals are to allow dragging and show the relative position to where the draggable item started out. This is done in the draggable method and by defining the function that occurs when the "drag" event fires. We simply use the ui.position method and properties to show the ".top" and ".left" information to the user while dragging. It should be noted that for some reason IE seems to not do so well with the draggables at times and is slightly jittery in motion, so updating the position elements in real time like this should probably be avoided in a production application, or at least go easier on the browser and show them in a statically positioned div or form element elsewhere on the page (not in the draggable item).
The drop zone must sense when a target has dropped onto it and jQuery does this by firing a "drop" event. So, we define within the droppable method an event handler for use during the "drop" event. In the event handlers, the colorization of the drop zone is done by adding a CSS class to the div of the drop zone, or removing it as the draggable div leaves the drop zone.
The method used to sense that the smaller droppable square moves out of the larger area, an "out" event is fired by jQuery and the event handlers in the droppable function named "out" removes the class that colorizes the drop area, resetting it back to it's original state.
Sensing when the dragged item is not within the droppable area is somewhat tricky. There are two basic ways to do this. The first is with the relative position of the divs (draggable or droppable elements) and the second is to rely on jQuery to fire an "out" event we can use. The latter is what we recommend in the general case unless specific browsers are being programmed for or handled as special case situations. The reason for this is that the ui.position property values returned are not consistent across browsers (IE and FireFox for example give substantially different figures). This is a jQuery problem in my opinion and more work needs to be done to manage consistency as it nearly renders the functions useless without a huge amount of custom browser sensing and variable value mods or special calculations based on the browser type. Since the goal is to be generic and we cannot assume to know all browser types, I have commented out the logic that changes the color as the square moves out of the drop zone that is based on ui.position but you can uncomment it and comment out the "out" event handler and see how it does the same to reset the color. You may adjust the relative coordinate values to suit a particular browser, or develop some comfortable average that you fee works across the browser set you are dealing with. In some ways, you CAN get better accuracy on a per browser basis by using the ui.position related values, but it's generally not going to be worth the effort and we can hope that the jQuery framework remains reasonable enough to fire the "out" event at a reasonable time.
You will note that the left and top values vary quite differently when testing with IE vs FireFox and thus, that is why we are not bothering using them to change the drop area color back, for now we rely on jQuery to fire off the "out" event and we then remove the style and reset the color of the drop area.
On a lesser important side note, the classes that do the colorization are classes that come along as part of the jQuery UI toolkit and happen to be convenient to use for this example. In other production efforts, you would likely restyle the elements to whatever classes desired and replace the "ui-state-highlight" class with one of your own later.
Expanding on this, jQuery has other animation features for draggables to return them to their original position. We will demonstrate that later on. It is also desireable to constrain a users dragging range so that they cannot do something inappropirate like drag an element off the page and loose it preventing them from completing a task or filling out a form (effectively breaking the application). In this example, you can break it by forcefully grabbing the lower edge of the draggable and sliding it off the page beyond the top edge of the web browser for example. Try it and you will see why considerations for constraining all draggable objects to a certain area of the page should be a first consideration during your programming efforts. There are ways to constrain the draggable elements and we will explore these features in later lessons building on what we have learned so far.
If you liked these lessons, please help support my continued efforts and make a donation. Even a couple dollars will be appreciated greatly to help pay for the many costs involved in running my consulting business, which are substantial and increasing regularly. Thank you!