2

リスト要素をドラッグしているときに、「並べ替え可能なリスト」をスクロールする方法を見つけようとしています。

スクロールは、ドラッグ元のリストでは正常に機能しますが、ドラッグ先のリストでは機能しません。

http://jsfiddle.net/jordanbaucke/pacbC/1/

同様のことを尋ねる別の質問：

jQueryソート可能なコンテナスクロールdivとoverflow auto

PS。Pivotaltracker、www.pivotaltracker.comはこれをうまく行っています。

4

3 に答える 3

7

古い質問ですが、今日はこれに数時間苦労したので、学んだことを共有したいと思いました.

ソート可能なスクロールは、scrollParent のオフセット、現在のスクロール位置、現在の項目の位置、および scrollSensitivity の関数です。ドラッグを開始すると、ソート可能オブジェクトは _mouseStart を実行します。これにより、scrollParent が設定され、現在の並べ替えのオフセットがキャッシュされます。この知識があれば、over イベント ハンドラーで小さなシャッフルを行うことができます。

over: function (event, ui) {
    ui.item.data('sortableItem').scrollParent = ui.placeholder.parent();
    ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset();
}

ドラッグされた要素がコンテナーを変更するときに発生します。over イベントをヒットすると、プレースホルダーは既に新しいコンテナーに移動しています。コードは新しい scrollParent を取得し、オフセットを再キャッシュします。

簡潔にするために、Tats_innit のフィドルをフォークしました: http://jsfiddle.net/3E2Hg/84/

scrollParent はイベント構造全体の他の場所で参照されるため、これが防弾かどうかはわかりません。それでも、これは良い出発点だと思います。問題が発生した場合は、この回答を更新します。

于 2013-11-26T21:38:46.697 に答える
3

実際のデモ http://jsfiddle.net/3E2Hg/1/

何か見逃した場合はお知らせください。以前の返信を参照してください:ドラッグ中にドロップ可能な div を自動的にスクロールする

動作: ドラッグ先の div もスクロールします。(残りのコードは以下)

お役に立てれば、

コード

$(function() {
    var sortlists = $("#List1, #List2").sortable({
        tolerance: 'pointer',
        connectWith: '#List1, #List2',
        helper: 'original',
        scroll: true
    }).on('scroll', function() {
        sortlists.scrollTop($(this).scrollTop());
    });
});​
于 2012-06-14T01:30:04.600 に答える