jquery ui多滴问题

时间:2010-03-15 23:40:44

标签: jquery jquery-ui drag-and-drop droppable

我有2个可放弃的div,当其中任何一个拖放时,我正在尝试获取该drop元素的id。它总是返回DOM中第一个drop元素的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');
    }           
  }
});

1 个答案:

答案 0 :(得分:1)

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

我对这个问题的回答相似!

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

            }