0

私はイメージ パン ツールを開発しており、親切なメンバーが jQuery のドラッグ可能なプラグインを教えてくれた後、ほとんどの作業を完了しました。現在、ユーザーが画像 (約 300px x 300px の div 内に含まれる) をドラッグすると、画像は最初にちらつき、次にパンします。この問題は、マウス ダウン イベントの後、マウス移動イベントで発生するようです。マウスを動かすと画像が 4 つのコーナーの 1 つに移動し、特定の領域に移動すると別の移動が発生します。私はグーグルで何も見つけることができませんでした。私はまだjQueryに比較的慣れていません。

説明が曖昧すぎる場合に備えて、ここにコードをアップロードしました: http://www.studentgroups.ucla.edu/csa/test/zoom.htm

どんなアイデアやアドバイスも大歓迎です！

4

1 に答える 1

1

1 つには、jQuery プラグインと独自のコードの両方を介して画像をドラッグ可能にしました。あなたのコードは の を変更してbackground-positionおりdiv、jQuery プラグインはdivの実際の位置を変更しています。それはいくつかの問題を引き起こすに違いありません。

また、Draggableのcontainmentパラメーターは、あなたがやろうとしているような大きなものではなく、親コンテナーよりも小さいドラッグ可能なアイテム用に設計されているようです。

とにかく、ここに作業コードがあります：

$(document).ready(function() {
    $(".draggable").draggable().bind('dragstop', function(e, ui) {
        if (ui.position.top > 0) {
            $(this).css('top', 0);
        }
        if (ui.position.left > 0) {
            $(this).css('left', 0);
        }

        var bottom = -($(this).height() - $(this).parent().height()),
        right  = -($(this).width() - $(this).parent().width());

        if (ui.position.top < bottom) {
            $(this).css('top', bottom);
        }
        if (ui.position.left < right) {
            $(this).css('left', right);
        }
    });
});

エッジ スナップが必要ない場合は、.bind()関数を削除して、 を呼び出すだけ.draggable()です。

$(document).ready(function() {
    $(".draggable").draggable();
});
于 2009-08-20T21:49:42.097 に答える