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

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

Kazuya Takato

Kazuya Takato

こんにちは。づやです。

さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には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はWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む