80

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

メインページを下にスクロールするときを除いて、すべて正常に動作します (ジョブは、ブラウザウィンドウの下部を超える大きなウィークプランナーに表示されます)。ここでドラッグ可能な要素をドラッグしようとすると、下にスクロールしたのと同じ量のピクセルで要素がマウス カーソルの上に表示されます。

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

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

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

これを修正するために何ができるか考えていますか?

4

21 に答える 21

108

これは関連するバグ レポートである可能性があります。かなり前から出回っています: 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;
   }
});
于 2011-04-26T20:09:59.247 に答える
46

このソリューションは、何も配置を調整しなくても機能します。要素を複製して、絶対に配置するだけです。

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

ヘルパーは、ドラッグする DOM 要素を返す必要がある関数にすることができます。

于 2012-09-28T15:04:18.963 に答える
8

別の答えを書いてすみません。上記の答えの解決策はどれも私には使用できなかったので、別の合理的な解決策を見つける前に、私は多くのグーグルを行い、多くのイライラするマイナーな編集を行いました。

この問題は、親要素のいずれかpositionが「相対」に設定されている場合に発生するようです。マークアップを再シャッフルしてCSSを変更する必要がありましたが、すべての親からこのプロパティを削除すること.sortable()で、すべてのブラウザーで正しく機能するようになりました。

于 2012-07-13T17:01:50.967 に答える
5

このバグはhttp://bugs.jqueryui.com/ticket/6817に移動され、約 5 日前 (2013 年 12 月 16 日またはその前後) の時点で、最終的に修正されたようです。現時点での提案は、 http: //code.jquery.com/ui/jquery-ui-git.jsから最新の開発ビルドを使用するか、この修正を含むバージョン 1.10.4 を待つことです。

編集: この修正は、バージョン 1.11 までドロップされる予定のないhttp://bugs.jqueryui.com/ticket/9315の一部になる可能性があるようです。上記のリンクされたソース管理バージョンの jQuery を使用すると、私と @Scott Alexander (以下のコメント) の問題が解決するようです。

于 2013-12-22T02:04:27.263 に答える
5

オーバーフローを削除します:

html {overflow-y: scroll; background: #fff;}

そして、それは完全に機能します！

于 2012-09-27T08:27:16.467 に答える
4

このバグが長い間修正されていなかったのは注目に値するようです。私にとっては、Safari と Chrome (つまり、Webkit ブラウザー) では問題ですが、IE7/8/9 や Firefox では問題なく動作します。

!important の有無にかかわらず、absolute または fixed を設定しても役に立たないことがわかったので、最終的にドラッグ ハンドラー関数に次の行を追加しました。

ui.position.top += $( 'body' ).scrollTop();

その行を webkit 固有にする必要があると予想していましたが、不思議なことに、どこでも問題なく機能しました。(すぐに私からのコメントを期待してください。「いいえ、実際には他のすべてのブラウザーを台無しにしてしまいました。」)

于 2012-08-15T11:21:45.317 に答える
3

私がやったことは次のとおりです。

$("#btnPageBreak").draggable(
        {
          appendTo: 'body',
          helper: function(event) {
            return '<div id="pageBreakHelper"><img  id="page-break-img"  src="page_break_cursor_red.png" /></div>';
          },
          start: function(event, ui) {
          },
          stop: function(event, ui) {
          },
          drag: function(event,ui){
            ui.helper.offset(ui.position);
         }
        });
于 2014-04-13T13:53:08.330 に答える
1

これがすべての場合に機能するかどうかは完全にはわかりませんが、この回避策は、テストする必要のあるさまざまな状況すべてで機能しました（ここや他の場所で以前に提案されたソリューションがすべて失敗した場合）

(function($){
$.ui.draggable.prototype._getRelativeOffset = function()
{
    if(this.cssPosition == "relative") {
        var p = this.element.position();
        return {
            top: p.top - (parseInt(this.helper.css("top"),10) || 0)/* + this.scrollParent.scrollTop()*/,
            left: p.left - (parseInt(this.helper.css("left"),10) || 0)/* + this.scrollParent.scrollLeft()*/
        };
    } else {
        return { top: 0, left: 0 };
    }
};
}(jQuery));

（私はそれをjQuery.uiトラッカーに送信して、彼らがそれについてどう思うかを確認しました。その4年前のバグを最終的に修正できればクールです：/）

于 2012-07-26T10:04:21.810 に答える
0

カーソル位置を取らないのはなぜですか？私はソート可能なプラグインを使用しており、次のコードで修正しています。

sort: function(e, ui) {
    $(".ui-sortable-handle.ui-sortable-helper").css({'top':e.pageY});
}
于 2015-01-03T01:35:49.563 に答える
0

jQueryの更新など、ここでさまざまな回答を試しましたが、これがうまくいくことがわかりました。これを最新の chrome と IE でテストしました。これは、UI レイアウトに応じてさまざまなソリューションで問題になると思います。

$('{selector}').draggable({
    start: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    },
    drag: function(event, ui) {
        ui.position.top -= $(document).scrollTop();
    }
});
于 2014-01-24T12:20:20.890 に答える
0

私は jQueryUi ドラッグ可能の使用をやめ、 jquery.even.dragと呼ばれるより優れたプラグインを使用するようになりました。コード サイズははるかに小さく、jQueryUI が持っているすべてのがらくたはありません。

position:fixed を持つコンテナ内でこのプラグインを使用してデモページを作成しました

デモ

この問題は大きいので、これが誰かの役に立てば幸いです。

于 2012-11-09T05:03:34.013 に答える
0

Windows 8で実行されている特定のIE 10でのみ、同様の問題がありました。他のすべてのブラウザーは正常に機能しました。cursorAt: { top: 0 } を削除すると問題が解決しました。

于 2014-01-16T19:08:12.593 に答える
0

を使用appendTo: "body'して位置を設定しcursorAtます。これは私からうまく機能します。

ページをスクロールした後でもマウスカーソルをたどる私のアイコンの例

$('.js-tire').draggable
      tolerance: 'fit',
      appendTo: 'body',
      cursor: 'move',
      cursorAt:
        top: 15,
        left: 18
      helper: (event) ->
        $('<div class="tire-icon"></div>').append($('<img src="/images/tyre_32_32.png" />'))
      start: (event, ui) ->
        if $(event.target).hasClass 'in-use'
          $('.js-send-to-maintenance-box').addClass 'is-highlighted'
        else
          $('.ui-droppable').addClass 'is-highlighted'
      stop: (event, ui) ->
        $('.ui-droppable')
          .removeClass 'is-highlighted'
          .removeClass 'is-dragover'
于 2019-04-11T14:49:03.687 に答える