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

151202_1714

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

仕様

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

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

jQueryとjQueryUIのDraggableを使います。

CSS

jQuery

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

HTML

ハマリポイント

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

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加

水蕗をフォローする

スポンサーリンク

コメントを残す