HTML5 と jQuery で気軽にドラッグ&ドロップする

折角 HTML5 でドラッグ&ドロップ API が実装されたんだからそれ使おうよと。jQuery のプラグインもあるけど、jQuery のバージョンに依存したりすると面倒だし。かと言って素の javascript だけで書くのは面倒だな。jQuery 使ってちゃちゃっとドラッグ&ドロップできないかな、、、ということでまとめてみました。おまじない忘れてて無駄な時間費やしてしまった、、、。

大雑把に説明するとこんな感じ。

1.ドラッグスタート時に event.dataTransfer にデータを格納
2.ドロップ時にそれを取得して処理をする

ドラッグしている要素そのものを扱うわけではないんだね。そこを勘違いしていてなんとか DOM 要素を取得しようとしてたんだけど、例えばドラッグ時に event.dataTransfer に id 属性値などを格納しておけばドロップ先で取得して処理することができる。ドラッグする要素とドロップされる要素それぞれに処理をバインドしてあげないといけない。

<div class='draggable' draggable='true'>ドラッグできます</div>
<div id='dropArea'>ここにドロップできます</div>

// これが必須、おまじない
jQuery.event.props.push('dataTransfer');

// ドラッグする時に event.dataTransfer にデータを格納
$(".draggable").live("dragstart", function(){
event.dataTransfer.setData("text", 'hoge');
});

// ドロップ時に event.dataTransfer のデータを取得して処理
$("#dropArea").live("drop", function(){
alert(event.dataTransfer.getData("text"));
event.stopPropagation();
event.preventDefault();
}).live("dragenter dragover", false);

かわのくんとは

Web系IT企業でプログラミングやマネジメントをしています。趣味で音楽を少々。

Youtubeでライブ動画配信中

Ustreamでライブ動画配信中

スマートフォン向けにPCサイトを自動変換(コンバート)する『CONV2SP』 CSS作成支援ツール『CSSツクール』