jquery ui multiple drops problem

Question

Hi I have 2 droppable divs and when a drag is dropped on either one of them, i'm trying to get the id of that drop element. It's always returning the id of the first drop element in the 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

You need to use ui.item.attr('id');

se my similar responce on this question!

http://stackoverflow.com/questions/2442232/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/2443081#2443081

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

            }