2

要素自体ではなく、背景の位置をドラッグしようとしています。

Demo

これが私のコードです

var left = 0,
    top = 0;
$('#box').draggable({ 
    start: 
    drag: function (e, ui) {
        // += as I am setting left and top = 0, so just taking the 'change'
        left += ui.position.left;
        top  += ui.position.top;  


        ui.position.left = 0;
        ui.position.top = 0;

        $(this).css({
            'background-position': left + 'px ' + top + 'px'
        });

    }, 
});

それは非常に速くそしてすぐにドラッグし、大きな値に達しますbackground-position-x。background-position-y

dragイベントが2回呼び出される ことがわかりました 。

ドラッグ機能は、初めて正しいドラッグ位置を提供しますが、2回目は、それbackground-position自体に値を追加すると思います。

4

1 に答える 1

1

ui.positionドラッグしている限り、jQuery UI は、設定に関係なく を追跡しているように見えます0。したがって、1 ピクセル右に移動すると、leftは1. 次に、に設定し0ますが、（停止せずに）別のピクセルを右にドラッグすると、ui.position.left実際には2ではなくになり1ます。

だからここに解決策があります。

  1. 値を追跡ui.positionし、ドラッグ中にそれらを減算します (したがって、前の移動と新しい移動の差を計算します)。
  2. ドラッグが停止したら、これらの値を にリセットします0(そうしないと、背景は に戻り続けます0px 0px)。

Fiddle を更新しました。ここで確認してください: http://jsfiddle.net/ZtYem/2/ (座標を分析するためにこれらのタグを追加<span>したので、再度削除できます)。

于 2013-03-07T09:59:18.507 に答える