現在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>
背景は動くのですが、背景の大きさまでしか動けないようにする方法や書き方がわかりません。
もし分かる方がいらっしゃればよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/02/11 06:30
2016/02/11 06:44
2016/02/11 07:47
2016/02/11 07:59
2016/02/11 14:27