1

次のオプションでドラッグ可能を使用しています。

$("#accountDetailPanel .draggable").draggable({
    helper: 'clone',
    appendTo: 'body',
    cursor: 'move',
    revert: 'invalid'
});         
$(".accountPod").droppable({ accept: '.draggable' });

ロード時にjqueryUIタブの2番目のタブのコンテンツにドラッグ可能を適用しています：

ここに画像の説明を入力してください

問題は、最初のドラッグだけが正常に機能することです。ドラッグ可能なものを許容可能なドロップ可能なものにドロップしないと、ポッドは元に戻りますが、別のドラッグを行うことはできません。何があっても、ドラッグされたポッドはドラッグ可能性を失います。

ここに画像の説明を入力してください

ドラッグ可能なinitに停止関数を適用しようとすると、無限の.draggable呼び出しをネストする必要があるという道に私を置きました。

完全なスクリプト：

$(document).ready(function(){

  $("#tabs").tabs();

  /**
   * Click on account pod -> account detail pane is populated
   *   Inside account detail, tabs pulled dynamically
   *     Installation List - each installation (home) is movable
   */
  $(".accountPod").live("click", function(event){

    var account_id = $(this).attr("id").replace("acct_", "");

    // load user's details into tab panel (replace all tabs)
    $("#accountDetailPanel").load("/accountDetail/" + account_id, function(){

      // post-load of tabs html
      $("#tabs").tabs();

      // init draggables
      $("#accountDetailPanel .draggable").draggable({
        helper: 'clone',
        appendTo: 'body',
        cursor: 'move',
        revert: 'invalid'
      });

      $(".accountPod").droppable({ accept: '.draggable' });

    });

  });

});

このフィドルは機能するので：http：//jsfiddle.net/notbrain/DycY6/41/タブがロードされたときの.draggable（）の動的アプリケーションに関連していると確信しています。

どんなポインタでも大歓迎です！

4

1 に答える 1

1

残念ながら、問題はライブラリがロードされていることだと思います。jQuery 1.8.5 と jQuery-git.js を使用するとうまくいくことがわかりました。

于 2011-07-13T23:17:50.037 に答える