Have Geek Brain

JQuery droppable / draggable question

I changed my app for sample manager.

photo manager app

Instead of photos, I have employee records coming from a request. My version will allow managers to tag employees both on vacation and at work. One of my things is to include employee ids for example <a href="123">

. I am getting 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 specifies the employee ID.

when i try to do the same in one of the functions:

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

});

warning (ui) gives me [object]. What's in this object? How do I get the href from this?

thanks

+2


a source to share


2 answers


The jQuery UI droppable documentation shows 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, change your code like this:

$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);
 }
});
+1


a source


I figured this solved my problem:

   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 change:

        $('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 :)

0


a source






More articles:


All Articles