Accessing draggable elements from ui.droppable drop function

Tuesday, 8 December 2009


This post looks at the ui.droppable drop function. We will look at how to access the droppable, the element that has been dropped onto the droppable and how to access it's methods.


In most cases the droppable views the item being dropped as a draggable, whether it is a ui.sortable or a ui.draggable. To get some understanding of how this works, I came across this section of the jQuery UI Development and Planning wiki: "The droppable implementation comes with a global drag & drop manager called $.ui.ddmanager. It tracks the current draggable, has a list of all droppables at all times and its 'drag' function is called during dragging of the draggable (a 'drop' function on mouseup). It then forwards to the actual widget functions of the current intersecting droppable.". This is important to understand as when we access the element after it is dropped it is referenced via ui.draggable.

Let's take a look at the droppable API and how it explains the drop function for the ui.droppable:

This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. ui.draggable represents the draggable.

Code examples:
Supply a callback function to handle the drop event as an init option.

    $('.selector').droppable({
       drop: function(event, ui) { ... }
    });

So our drop function has the following signature function(event, ui) and we know that $(this) represents the droppable and ui.draggable represents the draggable.

So regardless of whether it is a ui.sortable list item or a ui.draggable being dropped on a droppable we can access the element in the following way:
$("#target").droppable({
 drop: function(event, ui) { 
  var element = $(ui.draggable);
  var DOMelement = $(ui.draggable)[0];
 }
});

You can then manipulate the item in anyway that you like using javascript or jQuery as per usual.

For a standard UI widget when looking at the file you will notice there are two types of functions; those defined with an underscore such as _clear and _trigger in ui.draggable.js and those that don't have an underscore, such as serialize and toArray in ui.sortable.js. Those with an underscore are like privately scoped functions, you cannot call them outside of the UI widget, the others you can and it is done like this. $("#my_sortable_ul").sortable("toArray");. There are also getters and setters available, examples of which are usually available in the API such as ui.droppable addClasses option which can be retrieved as such:
//getter
var addClasses = $('.selector').droppable('option', 'addClasses');
//setter
$('.selector').droppable('option', 'addClasses', false);

So now that we know how to target our element in the drop function and we know which functions are public and how to use setters and getters here is an example of how we can call those functions within the ui.droppable drop function. Note: The sortable and draggable are different in that for sortable list items it is the parent who is the ui.sortable, whereas with the draggable it is the element itself that is the ui.draggable.

// Calling functions on a ui.sortable

drop: function(event, ui) { 
 var array_values = $(ui.draggable).parent().sortable("toArray");
}

// Calling functions on a ui.draggable

drop: function(event, ui) { 
 $(ui.draggable).draggable("destroy");
}

// Accessing getter on a ui.sortable

drop: function(event, ui) { 
 var this_opacity = $(ui.draggable).parent().sortable('option', 'opacity');
}

// Accessing getter on a ui.draggable

drop: function(event, ui) { 
 var this_cursor = $(ui.draggable).draggable('option', 'cursor');
}


With a sortable once it has been dropped it may be also usefull to access the siblings of the element dropped:

// Set the background color on all of the siblings of the dropped element to red

drop: function(event, ui) { 
 $(ui.draggable).siblings().css("background", "red");
}

Using andSelf you can manipulate the siblings as well as the dropped element:

// Set the text color of all of the elements including the dropped element to blue

drop: function(event, ui) { 
 $(ui.draggable).siblings().andSelf().css("color", "blue");
}

jQuery widgets are extremely well designed and have layers of complexity that require a bit of digging. The are very simple to use, but with a bit of research you can get a great amount out of them. Hopefully this tutorial will help you understand UI widgets in a bit more detail.
blog comments powered by Disqus