☰

jQueryのドラッグ可能なページをスクロールするとヘルパーが間違った場所に表示される 質問する

tag-icon • tag-icon jquery jquery-ui draggable jquery-ui-draggable
jQueryのドラッグ可能なページをスクロールするとヘルパーが間違った場所に表示される 質問する

私はjQueryを使用していますドラッグ可能そしてドロップ可能私が開発している作業計画システム用です。ユーザーはジョブを別の日またはユーザーにドラッグし、その後、Ajax 呼び出しを使用してデータが更新されます。

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

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

追加する必要があるオフセット関数があることは確かですが、それをどこに適用すればよいのか、またはもっと良い方法があるかどうかはわかりません。これが私の.draggable()初期化コードです:

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

これを修正するにはどうすればいいか、何かアイデアはありますか?

ベストアンサー1

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

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

1.position:absolute;CSS で使用します。絶対位置に配置された要素は影響を受けないようです。

2.親要素 (本文の場合はイベント) が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;
   }
});

おすすめ記事