タグ: jQuery

jQueryを使って、Sliderを作った。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらにスライダーがある。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには？ – Build Insider
Slider | jQuery UI
Sliderウィジェットでスライダーを生成するには？ – Build Insider

今回は jQuery UIなしで

今回は、ツマミを動かすと範囲内を横移動しツマミよりも左側が黄色になるというシンプルなもの。
前回のドラッグアンドドロップ（jQueryでドラッグアンドドロップ | nackpan Blog）と、だいたい一緒ですね。移動方向を限定して、黄色バーをCSSのwidthを調整しています。

白い円がツマミになります。左右に動かす事が出来ます。

HTML

HTML側では、スライダー部分をslider-containerにまとめて、右側のバー、左側のバー、ツマミをおく。
my-containerはスライダーの周りの水色の部分。

<div id="my-container">
	<div id="slider-container">
		<div id="slider-right"></div>
		<div id="slider-left"></div>
		<div id="thumb"></div>
	</div>
</div>

CSS

thumbのpositionをslider-containerを基準にしたabsoluteにする。

#slider-container {
	position:relative;
	……略……
}
#thumb {
	position:absolute;
	……略……
}

javascript

javascript側では、ツマミでマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素（今回はmy-containerと名付けた水色の部分）から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

$("#thumb").mousedown(function() {
	$("#my-container").mousemove(function(event){
		// 移動処理
	});
	
	$("#my-container").mouseleave(function(){
		$(this).unbind("mouseup mousemove mouseleave");
    });
	
	$("#my-container").mouseup(function(){
		$(this).unbind("mouseup mousemove mouseleave");
    });
});

jQueryを使って、drag and dropをやってみた。

jQuery UIについて

jQueryのプラグインで、 jQuery UIというものがあって様々なUIを提供している。こちらを使えばjQueryオブジェクトをドラッグ可能にできる。さまざまなオプションも簡単に指定できる。
jQuery UI
jQuery UIを利用するには？ – Build Insider
Draggable | jQuery UI
Draggable – jQuery UI API 1.8.4 日本語リファレンス – StackTrace

今回は jQuery UIなしで

今回は、シンプルにマウスダウンしたらドラッグ開始、マウスアップしたらドラッグ終了というのを作った。

オレンジの図形をドラッグして動かす事が出来る。
以前、CreateJSを使ってやったドラッグアンドドロップ（CreateJSを使ってみる – 図形のドラッグ）では、canvasを使用している。
今回動かすのは、div要素にidを割り当てて、CSSのbackground-colorで色を付けた矩形。
CSSのプロパティleft, topを使って移動させた。

注・今回のデモはタッチイベントに対応していない。なので、「CreateJSを使ってやったドラッグアンドドロップ（CreateJSを使ってみる – 図形のドラッグ）」と違って、スマートフォンでは図形をうごかせない。

HTML

sprite-01が動かす図形。my-stageが図形が動くステージ。その外側を、my-containerが囲む。
my-stage上でマウスが動いているときドラッグにしていたが、それではマウスが外に出てドラッグ終了となったときに図形がはしっこま寄らずに止まってしまう。そこで、さらに外側を囲むmy-containerを用意して、そこをマウス移動に反応する領域に設定した。

<div id="my-container">
    <div id="my-stage">
        <div id="xy-data">x: 130 y: 30</div>
        <div id="sprite-01"></div>
    </div>
</div>

CSS

sprite-01のpositionを、my-stageを基準にしたabsoluteにする。

#my-stage {
    position:relative;
    ……略……
}
#sprite-01 {
    position:absolute;
    ……略……
}

javascript

javascript側では、sprite-01でマウスボタンが押された(mousedown)なら、そのあとのマウスイベントをくっつける。
マウスが動いた(mousemove)とき、マウスボタンが離されたとき(mouseup)、マウスが所定の要素（今回はmy-container）から離れた(mouseleave)とき。mouseupかmouseleaveでドラッグは終了と判断して、mousemove,mouseup,mouseleaveを取り外す。

$("#sprite-01").mousedown(function() {
    $("#my-container").mousemove(function(event){
        // 移動処理
    });
    
    $("#my-container").mouseleave(function(){
        $(this).unbind("mouseup mousemove mouseleave");
    });
    
    $("#my-container").mouseup(function(){
        $(this).unbind("mouseup mousemove mouseleave");
    });
});