1


0

jquery ui複数ドロップの問題

ドロップ可能なdivが2つあり、そのいずれかにドラッグがドロップされると、そのドロップ要素の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');
    }
  }
});

1 Answer


1


`ui.item.attr( 'id');`を使用する必要があります

この質問に対する私の同様の応答を確認してください!

_ https://stackoverflow.com/questions/2442232/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/2443081#2443081 [位置の取得リスト内の要素がドラッグ/ドロップされたとき(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'));

            }