https://github.com/oti/hammer-drag-map
draggable map(element) with jquery.hammer.js
https://github.com/oti/hammer-drag-map
Last synced: about 1 year ago
JSON representation
draggable map(element) with jquery.hammer.js
- Host: GitHub
- URL: https://github.com/oti/hammer-drag-map
- Owner: oti
- License: mit
- Created: 2014-05-26T15:22:34.000Z (about 12 years ago)
- Default Branch: main
- Last Pushed: 2021-12-31T10:21:32.000Z (over 4 years ago)
- Last Synced: 2025-01-22T22:32:25.225Z (over 1 year ago)
- Language: JavaScript
- Size: 3.25 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hammer-drag-map
draggable map(element) with jquery.hammer.js
hammer-drag-map.jsは要素内にドラッグできる地図などを作成するJSです。
## 必要ライブラリ
+ jQuery v1.11.0 or v2.1.3
+ [jquery.hammer-full.js](https://github.com/EightMedia/jquery.hammer.js/blob/master/jquery.hammer-full.js)
## HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Hammer Drag Map</title>
<link rel="stylesheet" href="css/hammer-drag-map.css" media="screen">
<script src="js/lib/jquery-2.1.2.min.js"></script>
<script src="js/lib/jquery.hammer-full.min.js"></script>
<script src="js/hammer-drag-map.js"></script>
</head>
<body>
<div id="hammer-drag-map">
<div class="dragmap">
<!-- some map icon elements -->
</div>
<div class="shield __t"></div>
<div class="shield __r"></div>
<div class="shield __b"></div>
<div class="shield __l"></div>
</div>
<script>
var myMap = {
size: {
w: 1113
}
};
$("#hammer-drag-map").hdm(myMap);
</script>
</body>
</html>
## HTMLの補足
<div id="hammer-drag-map"> // 包含要素です。地図がこの内部に置かれます。
<div class="dragmap"> // 地図画像が背景として差し込まれます。ドラッグイベントを貼る要素です。
<!-- some map icon elements --> // もし地図内にランドマークやその他の要素を置きたい時は .dragmap 内に書きます。
</div>
<div class="shield __t"></div> // .shieldは画面の上下左右の端にできる「触れない壁」となります。
<div class="shield __r"></div> // 地図の端でドラッグできないようにするためのものです。
<div class="shield __b"></div> // サイズはCSSで変更できます。
<div class="shield __l"></div> // 地図がドラッグ限界に達した時にグラデーションを出す要素でもあります。
</div>
## 実行
```
$("#hammer-drag-map").hdm();
```
`.dragmap`と`.shield`を包含する要素に対して`.hdm()`を実行します。
## オプション
オブジェクトで渡して実行します。フルセットの形式は以下です。
```
var myOption = {
crop: {
w: 320,
h: 320
},
size: {
x: 1600,
y: 1600
},
start: {
x: -800,
y: -800
},
max: {
x: 0,
y: 0
},
min: {
x: -1280,
y: -1280
},
transition : "transform .075s ease-in-out",
extra : 25,
bounce : true,
restrict : true,
restrictName : "_restrict",
dragmapName: "dragmap",
shieldName: {
top : "__t",
right : "__r",
bottom: "__b",
left : "__l"
}
};
$("#hammer-drag-map").hdm(myOption);
```
## オプションの詳細
key
key2
description
value type
default value
crop
w
クロップエリアの幅px
int
320
h
クロップエリアの高さpx
int
320
size
w
地図の幅px
int
1600
h
地図の高さpx
int
1600
start
x
初期表示時にtranslateさせておくx座標値
int
-800(center of size.x)
y
初期表示時にtranslateさせておくy座標値
int
-800(center of size.y)
max
x
ドラッグさせたい範囲の左上側のtranslateさせるx座標値
int
0
y
ドラッグさせたい範囲の左上側のtranslateさせるy座標値
int
0
min
x
ドラッグさせたい範囲の右下側のtranslateさせるx座標値
int
-1280(size.x - crop.x)
y
ドラッグさせたい範囲の右下側のtranslateさせるy座標値
int
-1280(size.y - crop.y)
transition
transitionプロパティの値
string
"transform .075s ease-in-out"
extra
オーバードラッグさせるpx数
int
25
bounce
extraが1以上でオーバーラップさせた時にドラッグを自動で戻すかどうか
boolean
true
restrict
設定した限界までドラッグした時に.shieldに専用クラスを付与するか
boolean
true
restrictName
限界ドラッグ時に.shieldに付与するクラス名
string
"_restrict"
dragmapName
ドラッグできる地図を作る要素のクラス名
string
"dragmap"
shieldName
top
地図の上辺の触れない部分の要素のクラス名
string
"__t"
right
地図の右辺の触れない部分の要素のクラス名
string
"__r"
bottom
地図の下辺の触れない部分の要素のクラス名
string
"__b"
left
地図の左辺の触れない部分の要素のクラス名
string
"__l"
## 応用
### ドラッグ範囲の制限
hammer-drag-map.jsではある程度の大きさの地図（要素）の一部分にドラッグ範囲を制限することができます。
例えば、800*1200pxの`.dragmap`に対して横200pxと縦100pxの位置から横600pxと縦1100pxの範囲までしかドラッグさせたくない場合、以下のようにオプションオブジェクトを作って渡します。
```
var myOption = {
size: {
w: 800,
h: 1200
},
max:{
x: -200,
y: -100
},
min:{
x: -600,
y: -1100
}
};
$("#hammer-drag-map").hdm(myOption);
```
`max{}`と`min{}`に指定する座標はtranslateさせる値なので負の値になることに注意してください。
また、ドラッグ範囲を偏った座標に制限する場合は、初期表示位置の設定に注意してください。
### 初期表示位置の変更
デフォルトでは地図（要素）の中心座標が初期表示位置となるように設定されていますが、これも変更することができます。
```
var myOption = {
size: {
w: 800,
h: 1200
},
start: {
x: 0,
y: 0
}
};
$("#hammer-drag-map").hdm(myOption);
```
`start{}`にtranslateさせる値を渡します。上記の場合、地図の左上を表示した状態になります。
### 複数の要素にhammer-drag-map.jsを適用する
違うセレクタでHTML構造を作り、個別に`.hdm()`してください。
<div id="hammer-drag-map">
<div class="dragmap">
<!-- some map icon elements -->
</div>
<div class="shield __t"></div>
<div class="shield __r"></div>
<div class="shield __b"></div>
<div class="shield __l"></div>
</div>
<div id="anotherMap">
<div class="dragmap"></div>
</div>
<script>
var myMap = {
size: {
w: 1113
}
};
var anotherOpt = {
crop: {
w: 200,
y: 200
},
size: {
w: 800,
h: 800
}
};
$("#hammer-drag-map").hdm(myMap);
$("#anotherMap").hdm(anotherOpt);
</script>
## ライセンス
MITライセンスにて公開します。