jQuery でマウスで持って自由に移動できるフローティングボックスを実装する方法

マウスでクリックして自由に移動できるボックスのことをフローティングボックスっていうらしいですね。これを実装する方法を簡単に紹介しているサイトがなかなかなかったので、私の方で簡単にまとめました。

追記: draggable というもので簡単に同じ事を出来るそうです。

フローティングボックス用の最小構成

面倒なこと考えなくて良いように汎用性の効くシンプルな HTML を用意しました。

1
2
3
4

<div id="boxID">
	<h2>ここは見出しだけど持つところになる</h2>
	あとこの辺はコンテンツ。
</div>

CSS に最低限設定したいプロパティ

position: absolute; で自由に配置を変更できるように、background: #fff; でどこでもコンテンツが見えるように、z-index:10; でどこでも一番手前に表示されるようにします。あと他に必要なのあったら自分で追加してください。

1
2
3
4
5

#boxID {
	position: absolute;
	background: #fff;
	z-index: 10;
}

フローティングするための jQuery のコード

以下のコードで、1行目と2行目を設定すれば良いです。boxID は移動したいボックスで、clickID は持つところですね。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var boxID = "#boxID";
var clickID = "#boxID > h2";
$(clickID).mousedown(function(e){
	$(boxID)
		.data("clickPointX" , e.pageX - $(boxID).offset().left)
		.data("clickPointY" , e.pageY - $(boxID).offset().top);
	$(document).mousemove(function(e){
		$(boxID).css({
			top:e.pageY  - $(boxID).data("clickPointY")+"px",
			left:e.pageX - $(boxID).data("clickPointX")+"px"
		})
	})
}).mouseup(function(){
	$(document).unbind("mousemove")
});

関連記事

コメント

コメントは受け付けていません。