質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3243閲覧

draggableを使って背景を決められた範囲内で動かしたい

k499778

総合スコア599

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/02/11 05:04

現在jQueryUIのdraggableを使って背景を動かそうとしています。

質問があるのですが、
結論から言うと、

draggableを使ってgoogleMapのように背景を動かし、なおかつ背景が切れない、背景の大きさの限界までしか動かせないようにするにはどうしたらいいでしょうか?

ちなみに具体例を言うと以下リンクのような感じです。
http://ponk.jp/jquery/basic/image_move

この見える範囲をウインドウサイズにし、背景画像の大きさをウインドウの2倍の大きさにします。
背景画像の端までいくとそれ以上はドラッグできないようにしたいのです。

実際に作ってみました。

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script> 7<style> 8.box{ 9 width: 150px; 10 height: 150px; 11 background-color: #EFE; 12 border: solid 1px #CCC; 13 position: absolute; 14} 15#b1{ 16 top: 10px; 17 left: 20px; 18} 19#b2{ 20 top: 150px; 21 left: 200px; 22} 23#b3{ 24 top: 300px; 25 left: 340px; 26} 27 28</style> 29</head> 30<body> 31<div id="a1" style="background:aqua; width:2500px; height:1500px;""> 32 <div id="b1" class="box">b1</div> 33 <div id="b2" class="box">b2</div> 34 <div id="b3" class="box">b3</div> 35</div> 36<script> 37 $("#a1").draggable(); 38</script> 39</body> 40</html>

イメージ説明

背景は動くのですが、背景の大きさまでしか動けないようにする方法や書き方がわかりません。

もし分かる方がいらっしゃればよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんな感じでどうでしょう?

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 6<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script> 7<style> 8.container{ 9 width: 500px; 10 height: 500px; 11 overflow:hidden; 12} 13 14.backBox{ 15 width: 1000px; 16 height: 1000px; 17 background: aqua; 18} 19 20.box{ 21 width: 150px; 22 height: 150px; 23 background-color: #EFE; 24 border: solid 1px #CCC; 25 position: absolute; 26} 27 28#b1{ 29 top: 10px; 30 left: 20px; 31} 32#b2{ 33 top: 150px; 34 left: 200px; 35} 36#b3{ 37 top: 300px; 38 left: 340px; 39} 40#b4{ 41 top: 400px; 42 left: 470px; 43} 44#b5{ 45 top: 600px; 46 left: 700px; 47} 48#b6{ 49 top: 800px; 50 left: 850px; 51} 52 53</style> 54</head> 55<body> 56<div class="container"> 57 <div id="a1" class="backBox"> 58 <div id="b1" class="box">b1</div> 59 <div id="b2" class="box">b2</div> 60 <div id="b3" class="box">b3</div> 61 <div id="b4" class="box">b4</div> 62 <div id="b5" class="box">b5</div> 63 <div id="b6" class="box">b6</div> 64 </div> 65</div> 66<script> 67 $("#a1").draggable({ 68 drag: function(event, ui) { 69 var t = $(this); 70 var tw = t.width(); 71 var th = t.height(); 72 73 var c = t.parent(); 74 var cw = c.width(); 75 var ch = c.height(); 76 77 if(ui.position.left < cw - tw) 78 { 79 ui.position.left = cw - tw; 80 } 81 82 if(ui.position.left > 0) 83 { 84 ui.position.left = 0; 85 } 86 87 if(ui.position.top < ch - th) 88 { 89 ui.position.top = ch - th; 90 } 91 92 if(ui.position.top > 0) 93 { 94 ui.position.top = 0; 95 } 96 } 97 }); 98</script> 99</body> 100</html>

投稿2016/02/11 06:09

K_S_

総合スコア419

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/02/11 06:30

KondoSatoruさん 回答ありがとうございます。 求めている答えでした!感謝しています。 その上でおこがましいですがもう一つだけ聞いてもいいでしょうか? draggableの動きのせいか、一番端までドラッグした際に少し余白が見えてしまいます。 これを防ぐ方法はないでしょうか? もしくはdraggableの性質上避けられないものであるならば他のプラグインを使ってでも代替策はないでしょうか? もしお答え頂ければよろしくお願いします。
K_S_

2016/02/11 06:44

自分のsafar環境では上部に隙間がありましたが、以下のようにbody要素のマージンを消すことで消すことができました。 (before) <body> (after) <body style="margin: 0px"> この隙間以外は自分の環境では見当たりませんでした。
k499778

2016/02/11 07:47

KondoSatoruさん 返答ありがとうございます。 おそらくそれは最初から見えている余白ですよね。 私が言っているのは、ドラッグを勢いよくしたときに一瞬見える背景とその後ろの狭間です。 例えば左にギューっと引っ張り続けるとdraggableの特性上少し右端に白い部分が見えると思うのです。 少しそれが気になったのでもし何か方法を知っていらっしゃればと思いまして。 もし知っていらっしゃればお教えいただけると幸いです。
K_S_

2016/02/11 07:59

私のMacのsafari, firefox, chromeで試しましたが、そのような隙間は見えませんでした。 発生環境と発生する画面の状態(スクリーンショット)を教えていただければ、もしかするとわかるかもしれません。
k499778

2016/02/11 14:27

返答ありがとうございます。 画像を貼るのにコメントだとできないのと 回答を得た後に何度もここでやりとりしてもらうのは申し訳ないと思い 新たなスレを立ち上げました。 もしよろしければそちらで回答いただけたらと思います。 https://teratail.com/questions/27060 真摯に対応していただきありがとうございます。 感謝しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問