• Choose a category
• All
• Classic-Fiction

By Root 1499 0

is dropped on it. Note that making something droppable doesn’t have any particular effect on its own. The interesting thing comes when you bind events to the element.

4. Bind a drop event to the target.

Droppable elements can have events attached to them just like any jQuery object. However, the mechanism for attaching an event to a user interface object is a little bit different than the standard jQuery event mechanism (which involves a custom function for each event). Use the bind method to specify a function to be called when a particular event occurs. When the user drops a node that has been made draggable onto the target element, this triggers the drop event, so call the changeTarget() function.

5. Bind a dropout event to the target as well.

You can bind another event to occur when the user removes all draggable elements from the target. This event is called dropout, and I’ve told the program to call the resetTarget() function when this event is triggered.

You often see programmers using shortcuts for this process. Sometimes, the functions are defined anonymously in the bind call, or sometimes the event functions are attached as a JSON object directly in the droppable() method assignment. Feel free to use these techniques if you are comfortable with them. I’ve chosen the technique used here because I think it is the clearest model to understand.

Handling the drop

When the user drags a dragMe element and drops it on the target, the target’s background color changes and the program reports the text of the element that was dragged. The code is easy:

function changeTarget(event, ui){

$(“#target”).addClass(“ui-state-highlight”)

.html(“Dropped “)

.append(ui.draggable.text());

} // end changeTarget

Here’s how to put this together:

1. Create a function to correspond to the drop event.

The drop event is bound to a function called changeTarget, so I need to create such a function.

2. Include two parameters.

Bound event functions require two parameters. The first is an object that encapsulates the event (much like the one in regular DOM programming) and a second element called ui, which encapsulates information about the user interface. You can use the ui object to determine which draggable element was dropped onto the target.

3. Highlight the target.

It’s a good idea to signal that the target’s state has changed. You can change the CSS directly (with jQuery) or use jQuery theming to apply a predefined highlight class. I chose to use the jQuery theme technique to simply add the ui-state-highlight class to the target object.

4. Change the text to indicate the new status.

Normally you should do something to indicate what was dropped. (If it’s a shopping application, you should add the element to an array so that you can remember what the user wants to purchase, for example.) In this example, I simply change the text of the target to indicate that the element has been dropped.

5. Use ui.draggable to get access to the element that was dropped.

The ui object contains information about the user interface. ui.draggable is a link to the draggable element that triggered the current function. It’s a jQuery element, so you can use whatever jQuery methods you want on it. In this case, I extract the text from the draggable element and append it to the end of the target’s text.

Beauty school dropout events

Another function is used to handle the dropout condition, which occurs when draggable elements are no longer dropped on the target. I bind the resetTarget function to this event:

function resetTarget(event, ui){

$(“#target”).removeClass(“ui-state-highlight”)

.html(“Drop on me”);

} // end reset

All you have to do is this:

1. Remove the highlight class from the target.

One great thing about using the theme classes is how easy they are to remove. Remove the highlight class, and the target reverts to its original appearance.

2. Reset the HTML text.

Now that the target is empty, reset its HTML so that it prompts the user to drop a new element.

Cloning the elements

You