[解決済み] jQuery draggableはページがスクロールした後、ヘルパーを間違った場所に表示します。

質問

jQueryを使っています。 ドラッガブル と ドロッパブル を使用しています。ユーザーは仕事を別の日またはユーザーにドラッグし、データは ajax 呼び出しを使用して更新されます。

メインページをスクロールダウンするときを除いて、すべてが正常に動作します (仕事は、ブラウザ ウィンドウの下部を超える大きな週間プランナー上に表示されます)。ここでドラッグ可能な要素をドラッグしようとすると、要素は、私がスクロールダウンしたのと同じ量のピクセルで、私のマウス カーソルの上に表示されます。ホバー状態はまだ問題なく動作し、機能性もバッチリですが、見た目が正しくありません。

jQuery 1.6.0とjQuery UI 1.8.12を使用しています。

オフセット機能を追加する必要があると思うのですが、どこに適用すればいいのか、もっといい方法はないでしょうか。以下は、私の .draggable() の初期化コードです。

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

これを修正するために何ができるのか、何か心当たりはありますか？

どのように解決するのですか？

これは関連するバグレポートかもしれません、かなり長い間存在しています。 http://bugs.jqueryui.com/ticket/3740

私がテストしたすべてのブラウザ (Chrome、FF4、IE9) で発生するようです。この問題を回避する方法がいくつかあります。

1. 使用方法 position:absolute; をcssに記述してください。絶対位置指定された要素は影響を受けないようです。

2. 親要素（bodyの場合はイベント）には必ず overflow:auto; が設定されていることを確認します。私のテストでは、この解決策は位置を修正しますが、自動スクロール機能を無効にすることが示されました。マウス ホイールまたは矢印キーを使用して、まだスクロールできます。

3. 上記のバグレポートで提案された修正を手動で適用し、他の問題が発生するかどうか十分にテストしてください。

4. 正式な修正を待つ。過去に何度か延期されたことがありますが、jQuery UI 1.9に予定されています。

5. すべてのブラウザで起こるという確信があるなら、影響を受けるドラッガブルのイベントにこれらのハックを入れて、計算を修正することができます。しかし、テストするには多くの異なるブラウザーが必要なので、最後の手段としてのみ使用すべきです。

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});