Get attribute of JQuery ui.draggable

Question

I'm using JqueryUI for drag and drop on one of my pages and for some reason I can't seem to get an attribute of the ui.draggable object being passed into my droppable drop event.

ui.draggable.attr("src") and $(ui.draggable).attr("src") both return undefined, however if I type ui.draggable.html() I will get the html back. Any ideas?

Answer 1

I figured it out. The solution is to call ui.draggable.find("img").attr("src"), I just assumed that the ui.draggable object was an image.

Answer 2

@Jon's answer is correct. The solution is just simply try attr method, without trying to inspect the draggable element beforehand ( otherwise you will be puzzled).

given a html element declared as jQuery UI's 'draggable':

<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />

and given this 'div' as droppable:

<div id='droppable_area'> </div>

<script>
$('img.candidate_thumbnail').droppable({
  drop: function(event, ui) {
    console.info('ui.draggable.title:' + ui.draggable.title);
    console.info('ui.draggable.attr("title"):' + ui.draggable.attr('title'));
    console.dir('ui.draggable:' + ui.draggable);
  }    
</script>

And I got :

ui.draggable.title: undefined
ui.draggable.attr("title"): I am an image!
ui.draggable: [object Object]
  -> No Properties