jquery ui gouttes multiples problème

Question

J'ai 2 divs droppable et quand un drag est déposé sur l'un d'eux, j'essaie d'obtenir l'ID de cet élément de baisse. Il renvoie toujours l'ID du premier élément drop dans le DOM.

$('#albumImgs li').draggable({ 
    containment: '#content', 
    scrollSensitivity: 60, 
    revert: 'invalid', 
    cursor: 'move' 
}); 

$('.dropContainerClosed').droppable({ 
    accept: '#albumImgs li', 
    activeClass: 'dropContainerOpen', 
    drop: function(event, ui) { 

    var file = $(ui.draggable.find('img')); 
    var fileName = file.attr('alt'); 

    var albumName = $('div.dropContainerClosed').attr('id'); 

    console.log("fileName = "+fileName); 
    console.log("albumName = "+albumName);//always returns the first div.dropContainerClosed id in the DOM 

    if(albumName != undefined) { 
     $.post('addImage.php', {filen: fileName, albumn: albumName}, 
     function(data) { 
     //do something here 
     }, 'json'); 
    } else { 
     $.post('firstImage.php', {filen: fileName, albumn: albumName}, 
     function(data) { 
     //do something here 
     }, 'json'); 
    }   
    } 
}); 

Answer 1

Vous devez utiliser ui.item.attr('id');

se responce mon similaire sur cette question!

Getting the position of the element in a list when it's drag/dropped (ui.sortable)

$(function() { 
    $my_droppable = $('#my_droppable'); 

    $my_droppable.droppable({ 
       accept: '#my_droppable > li', 
       activeClass: 'ui-state-highlight', 
       drop: function(ev, ui) { 
    //define your func after drop.. 
       get_my_attr(ui.draggable); 
       } 
      }); 

//THIS IS IMPORTANT FOR GET THE ATTR AND OTHER STUFF 

// resolve the icons behavior with event delegation 

     $('ul.my_droppable > li').click(function(ev) { 
      var $item = $(this); 
      var $target = $(ev.target); 

      if ($target.is('a.ui-icon-trash')) { 
      deleteImage($item); 
      } else if ($target.is('a.ui-icon-zoomin')) { 
      viewLargerImage($target); 
      } else if ($target.is('a.ui-icon-refresh')) { 
      recycleImage($item); 
      } 

      return false; 
     }); 

     }); 
    }); 
      function get_my_attr($item) { 

       alert($item.attr('class')); 

      }