2

小さなコンテナーと、その中にドラッグ可能にしたい大きな可変サイズ (画像はユーザーが送信したもの) の画像があります。私はjQuery UIの「ドラッグ可能」機能を垂直方向のドラッグに使用していますが、うまく機能しますが、私が抱えている唯一の問題は、画像を上下にドラッグして、端が表示され、上の空白が見えるようにすることですまたはコンテナ内のその下。たとえば、画像の下端がコンテナの下端に当たったときに、それ以上上にドラッグできないようにしたいのです。

私は使用しようとしています

{ containment:[x1, y1, x2, y2] }

これを機能させるためのオプションであり、多くの試行錯誤の後、さまざまなサイズの画像の正しい値を計算できますが、画像サイズと包含値の間の機能的な関係を理解できません。誰かが私を助けてくれますか、または画像のサイズと封じ込めの関係について正しい方向に向けてくれますか? コンテナは 360x240 の固定サイズです。本当にありがとう。

JSfiddle: http://jsfiddle.net/Ey74c/コンテナー内の空白を表示したくありません。つまり、画像を上下に十分にドラッグすることはできません。contention: "parent" を設定してみましたが、スクロールしなくなりましたか?

4

2 に答える 2

1

この問題を解決するには、次を使用する必要があります。{ containment:[x1, y1, x2, y2] } 

$("#container img").draggable({
    containment: [(parseInt($("#myImage").width()) - parseInt($("#container").width())) * -1, 
                  (parseInt($("#myImage").height()) - parseInt($("#container").height())) * -1, 0, 0]
});

jsフィドル

x1= - (img.幅 - コンテナ.幅)

y1= - (img.height - コンテナー.高さ)

x2= 0

y2= 0

于 2013-02-02T23:39:57.427 に答える
0

画像を追加して、次のようidに使用しますcontainment: http://jsfiddle.net/Ey74c/2/

<div id="container">
    <img id="myImage" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg"
    />
</div>

$("#container img").draggable({
    containment: [$('#myImage').width() * -1, $('#myImage').height() * -1, 0, 0]
});
于 2013-02-02T22:58:38.473 に答える