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