jQuery draggableを使用して、divクリッピングマスク内でズームした画像をドラッグしますか？

Question

私は、ユーザーが画像を拡大してズームしたバージョンをクリッピングマスクのdiv内にドラッグできるようにするインターフェイスを作成しています。

私はオーバーフロー：hiddenを設定したdiv 200px by 200pxを持っています。次に、1000px by 1000pxというdivにstd img（<img src="etc">）をロードします。

は、その後、私はjQueryの

$("#my-image").draggable({ containment: [-85,83,99,222] }); 

を使用する番号は、ハードコーディングされています。これまでの試行錯誤でしか見つけることができません...

問題は、ページを変更する（つまり、コンテナdivの上に別の要素を挿入する）たびにページサイズが変更され、ハードコードされた[ x1、y1、x2、y2]が正しく動作しなくなります。

主な問題は、私は完全にここで

このに関するjQueryのドキュメントである... [X1、Y1、X2、Y2]を理解していないです。

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

は、私は右の思考でアムx1は最も左にドラッグ可能な点、x2は最もドラッグ可能な点です。 （y1 & y2についても同じですか？

もしそうなら、それらを動的に計算する最良の戦略は何でしょうか？

また、「divクリッピングマスク内でズームした画像をドラッグする」という主な問題に対する他の迅速かつ簡単な解決策は、非常に高く評価されます。

Answer 1

私は今これが働いている。これは、divクリッピングマスク内にドラッグ可能な画像を設定して、完全に動的で、ページのサイズを変更しても機能するようにする方法です。

HTML/CSS

<div id="my-mask" style="width: 200px; height: 200px; overflow: hidden;"> 
    <img id="my-image" src="big-image.jpg" width="1000" height="1000"/> 
</div> 

jQueryの/ JavaScriptの

// Make sure it always starts @ zero position for below calcs to work 
$("#my-image").css({top: 0, left: 0}); 

var maskWidth = $("#my-mask").width(); 
var maskHeight = $("#my-mask").height(); 
var imgPos  = $("#my-image").offset(); 
var imgWidth = $("#my-image").width(); 
var imgHeight = $("#my-image").height(); 

var x1 = (imgPos.left + maskWidth) - imgWidth; 
var y1 = (imgPos.top + maskHeight) - imgHeight; 
var x2 = imgPos.left; 
var y2 = imgPos.top; 

$("#my-image").draggable({ containment: [x1,y1,x2,y2] }); 
$("#my-image").css({cursor: 'move'}); 

・ホープこれは誰かに役立ちます！

Answer 2

$(this).draggable({ 
    drag: function(event, ui) { 
     if (ui.position.top > 0) { 
      ui.position.top = 0; 
     } 
     var maxtop = ui.helper.parent().height() - ui.helper.height(); 
     if (ui.position.top < maxtop) { 
      ui.position.top = maxtop; 
     } 
     if (ui.position.left > 0) { 
      ui.position.left = 0; 
     } 
     var maxleft = ui.helper.parent().width() - ui.helper.width(); 
     if (ui.position.left < maxleft) { 
      ui.position.left = maxleft; 
     } 
    } 
});