jquery - jquery ui 多次掉线问题

Question

我有 2 个可放置的 div，当在其中任何一个上拖放时，我正在尝试获取该放置元素的 id。它总是返回 DOM 中第一个放置元素的 id。

$('#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

你需要使用ui.item.attr('id');

看看我对这个问题的类似回应！

拖放时获取元素在列表中的位置（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'));

            }