4

jQueryUIのドラッグ可能なウィジェットを使用してドラッグアンドドロップを実装しました。

現在、ドラッグ操作中に自動スクロールを実装しています。ドラッグを開始すると、ブラウザウィンドウの上下に灰色のオーバーレイが表示されるように設定しました。これらのオーバーレイの1つにドラッグすると、ブラウザウィンドウが自動スクロールを開始します。

私のテストページはhttp://www.softcircuits.com/Client/scrolltest.htmlで見ることができます。左側の十字アイコンの1つをドラッグして、アイテムをドラッグします。

ただし、問題があります。ページの一番下までスクロールしてから、アイテムを一番上のオーバーレイにドラッグすると、期待どおりに上にスクロールします。ただし、私にとっては、ページの半分ほど上に移動し、ドラッグ可能なヘルパーはそれ以上上に移動しません。ページの一番上までドラッグする方法はありません。

これはおそらくDraggableウィジェットに関連しているようです。なぜこれが起こっているのか誰かが見ることができますか？Windows7でGoogleChromeを使用しています。

4

2 に答える 2

3

ブラウザー間の互換性を保ち、奇妙な動作を避けるために、すべてのJQueryUI ドラッグ可能なコールバックを使用することをお勧めします。

Chrome の最新バージョンには、ネイティブの HTML5 ドラッグ可能イベントに関して非常に厄介な問題があることを数日前に読みました。

たとえば、Web ページのソース コードを確認したところ、使用している$('.drag-handle').on('drag', function(){...});=>ドラッグコールバックを使用する必要があります。

windowあなたの場合、スクロール可能なコンテナとして使用しないこともお勧めします。divすべてのテーブル コンテンツをラップし、それをスクロール コンテナーとして使用するには、 を作成する必要があります。私はすでにこの実装を過去に行っており、機能しています。

containmentドラッグ可能なウィジェットの作成中に、オプションでラッパー ID を設定することを忘れないでください。

常に機能しない場合は、dragコールバックでヘルパーの位置を上書きすることもできます。

//Save the mouse position in global variables
$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
});

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});
于 2013-01-13T09:24:58.637 に答える
1

ドラッグ可能な包含オプションをウィンドウからドキュメントに変更するとうまくいきました。

$('.drag-handle').draggable({ 
    ...
    containment: "document",
    ...
});

参照: http://docs.jquery.com/UI/Draggable#option-containment

于 2013-01-21T21:45:02.643 に答える