WEB

jQuery UIのDraggableで快適なドラッグアンドドロップライフを!

jQuery UIのDraggableで快適なドラッグアンドドロップライフを!

こんにちは。づやです。

さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。
そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。

5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。

便利なjQuery UIのDraggableを利用します

と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。

※コードは大事な所だけ抜粋しています

<html>
<head>
<!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$(function() {
        // #div1をdrag可能に
	$("#div1").draggable();
});
</script>
</head>
<body>
<div id="div1">
DIVだよー
</div>
</body>
</html>

すごいですね、なんとこれだけでdivが動かしたい放題です。

さすが未来、2014年ともなると5年前には考えられなかったくらい簡単に実装できますが、これだけでは本当に動かせるだけであんまりやりたいことができませぬ。

公式のリファレンス(Droppableページ)を読むとオプションなどがいっぱいあります。

それを参照にしながら、下記のような感じでいろいろ指定しつつ試してみるといいと思います。

        // 横にしか動かない
        $("#div1").draggable({ axis: "x" });
        // 縦にしか動かない
        $("#div2").draggable({ axis: "y" });
        // .baDiv の中でしか動かない
	$("#div3").draggable({ containment: ".baDiv" });
        // .baDivの中で動いて、くっつく
	$("#div4").draggable({ containment: ".baDiv" , snap:".baDiv"});

後はイベントもちゃんといいところを押さえてくれています。

	$("#div1").draggable({
		// ドラッグ開始時に呼ばれる
		start : function (event , ui){
			console.log("start event start" );
			console.log(event , ui);
		} ,
		// ドラッグ中に呼ばれる
		drag : function (event , ui) {
			console.log("drag event start" );
			console.log(event , ui);
		} ,
		// ドラッグ終了時に呼ばれる
		stop : function (event , ui){
			console.log("stop event start" );
			console.log(event , ui);
		}
	});

	$("#div2").draggable({
		start : function (event , ui){
			$(this).css({background:"blue"});
		} ,
		stop : function (event , ui){
			$(this).css({background:"green"});
		}
	});
		

便利なjQuery UIのDroppableを利用します

上記の方法でドラッグは簡単にできるようになるのですが、ドロップをどうするかというと、ここではjQuery UIのDroppableを利用します。

例えば下記のようなHTMLを用意して、

	<div id="div1" class="dragDiv">
		グレイに置いてね1
	</div>

	<div id="div2" class="dragDiv">
		グレイに置いてね2
	</div>


	<div id="div3">
		ここにおけるよ
	</div>

下記のように書いてみます。

	// .dragDiv をドラッグ可能に
	$(".dragDiv").draggable();

	$( "#div3" ).droppable({
		accept : ".dragDiv" , // 受け入れる要素を指定
		drop : function(event , ui){ // ドロップされた時に動きます
                    console.log("ドロップされました");
		} 
	});

そうすると、対象の要素にドロップされたときになにかをさせるというのも簡単に実装できます。

これまたたくさんのオプションやイベントが用意されていますので、公式のリファレンス(Droppableページ)を読みながら試してみると楽しいんじゃないかと思います。

なんだか工夫次第で色々できそうな気がしてきますよね。
パッと思いついたのはこんな処理でした。

以上です。みなさんもより良いドラッグアンドドロップライフを送りましょう。


LIGでは、エンジニアを絶賛募集中!
http://liginc.co.jp/recruit/mid_career

この記事を書いた人

づや
づや 取締役 2007年入社
高遠です。俺ほどずっとプログラム書いてるやつはいるかって、たぶんいないですね。LIGで唯一の闇属性です。好きな本は「ドグラマグラ」「ヴォイニッチ手稿」「旧約聖書」です。好きな思考実験は「シュレーディンガーの猫」。好きな言語はラテン語です。あと、嫌だったんですがLINEスタンプにもなりました。