10

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

200px by 200pxoverflow: hidden を設定した divがあります。次に、 std img ( <img src="etc">) を divにロードし1000px by 1000pxます。

次に、jQueryを使用します

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

数字はハードコードされています。これまでのところ、試行錯誤でしか見つけることができません...

問題は、ページを変更するたびに (コンテナ div の上に別の要素を挿入するなど)、ページ サイズが変更され、ハード コードされた [x1, y1, x2, y2] が正しく機能しなくなることです。

主な問題は、[x1、y1、x2、y2] を完全に理解していないことです...

これに関するjQueryドキュメントは次のとおりです。

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

x1 がドラッグ可能な最も左のポイントであり、x2 がドラッグ可能な最も右のポイントであると考えるのは正しいですか? （y1とy2も同じ）？

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

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

4

2 に答える 2

27 
$(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;
        }
    }
});
于 2011-09-20T15:41:17.347 に答える
24

Ok。私は今これを機能させました。これは、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'});

これが誰かを助けることを願っています!

于 2009-10-19T20:45:38.610 に答える