question about jQuery droppable/draggable

I modified a sample photo manager application.

photo manager application

Instead of photos, I have employee records coming from a query. My version will let managers mark employees as on vacation, or at work. One of the things I did is to include employee ids like <a href="123">. I get the ids from event.target. This works for the click function but not for the "droppable" function. This is what I have for the click function:

$('ul.gallery > li').click(function(ev) {
  var $item = $(this);
var $unid = ev.target;
var $target = $(ev.target);
if ($target.is('a.ui-icon-suitcase')) {
 deleteImage($item,$unid);
} else if ($target.is('a.ui-icon-arrowreturnthick-1-w')) {
 recycleImage($item,$unid);
}
return false;

});

ev.target correctly gives the employee id.

when i try the same in one of the droppable functions:

$gallery开发者_运维知识库.droppable({
accept: '#suitcase li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
 var $unid = ev.target;
 alert($unid);
 recycleImage(ui.draggable,$unid);
}

});

the alert(ui) gives me [object]. What's in this object? How do i get the href out of this?

thanks

In the jQuery UI droppable documentation it shows you that it provides additional jQuery objects:

* ui.draggable - current draggable element, a jQuery object.
* ui.helper - current draggable helper, a jQuery object
* ui.position - current position of the draggable helper { top: , left: }
* ui.offset - current absolute position of the draggable helper { top: , left: }

So, changing your code as follows should work:

$gallery.droppable({
 accept: '#suitcase li',
 activeClass: 'custom-state-active',
 drop: function(ev, ui) {
  var $unid = ui.draggable.attr('id');
  alert($unid);
  recycleImage(ui.draggable, $unid);
 }
});

i thought this solved my issue:

   drop: function(ev, ui) {
    var $unid = $(ui.draggable).attr('id');
    recycleImage(ui.draggable,$unid);
    }

if i use this:

 var $unid = ui.draggable.find('id');

then i get [object object]

also, i had to modify:

        $('ul.gallery > li').click(function(ev) {
            var $item = $(this);
            var $unid = $(this).attr('id');
            var $target = $(ev.target);
            if ($target.is('a.ui-icon-suitcase')) {
                deleteImage($item,$unid);
            } else if ($target.is('a.ui-icon-arrowreturnthick-1-w')) {
                recycleImage($item,$unid);
            }
            return false;
        });

works like a charm :)