画像をドラッグすると表示領域が変わるjQueryUIを使ったコンテンツ

画像の下に「拡大ボタン」がついていて、ボタンを押すとそのエリアに大きな画像が表示され、画像をドラッグすると表示領域が変わるというコンテンツ制作の際にちょっとハマりました。

仕様

width 306px、height 544pxのdiv.stageに、width 540px、height 960pxのimgを置きます。div.stageのoverflowはhiddenにしてimgをドラッグできるようにします。

説明が難しいのですが、div.stageに灰色の背景が敷いてあったとして、imgを移動させたときにその灰色が見えないように、移動させる範囲を限定します。

jQueryとjQueryUIのDraggableを使います。

CSS

.stage {
	background-color: #f0f0f0;
	width: 306px;
	height: 544px;
	overflow:hidden;
	position: relative;
}

.stage {

background-color: #f0f0f0;

width: 306px;

height: 544px;

overflow:hidden;

position: relative;

}

jQuery

※leftの234とtopの416は、div.stage（width 306px、height 544px）とimg（width 540px、height 960px）差です。

jQuery(function($){
	$('.stage img').draggable({
		containment:[
			$('.stage').offset().left - 234,
			$('.stage').offset().top - 416,
			$('.stage').offset().left,
			$('.stage').offset().top
		]
	});

	var timer = false;
	$(window).resize(function() {
		if(timer !== false) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			$('.stage img').draggable("option",
				"containment",
				[
					$('.stage').offset().left - 234,
					$('.stage').offset().top - 416,
					$('.stage').offset().left,
					$('.stage').offset().top
				]);
		}, 200);
	});
});

jQuery(function($){

$('.stage img').draggable({

containment:[

$('.stage').offset().left - 234,

$('.stage').offset().top - 416,

$('.stage').offset().left,

$('.stage').offset().top

]

});

var timer = false;

$(window).resize(function() {

if(timer !== false) {

clearTimeout(timer);

}

timer = setTimeout(function() {

$('.stage img').draggable("option",

"containment",

[

$('.stage').offset().left - 234,

$('.stage').offset().top - 416,

$('.stage').offset().left,

$('.stage').offset().top

]);

}, 200);

});

HTML

<div class="stage"><img src="./img/teaA_f.png" width="540" height="960"></div>

1	<div class="stage"><img src="./img/teaA_f.png" width="540" height="960"></div>

ハマリポイント

jQueryUIのDraggableのオプションであるconatinmentに配列を設定すると、ドラッグできる範囲を設定できますが、実はこれがoffset指定なので、親のCSSをposition:relativeにしても意味がありません。（offset指定ということに気がつくまで2時間くらいかかってしまいました・・・）

つまり、左上からの絶対座標をとらなくてはいけないのです。当然、リサイズをすると変わってしまいますので、リサイズイベントをトリガーにして設定をし直しています。

ただし、リサイズしているあいだじゅう設定を上書きする必要はないので、200ミリ秒ごとに設定をするようにしています。