ドラッグ&ドロップ


Drag & Drop

 Windowsアプリケーションで一般的なDrag & Drop機能をブラウザで実現するためのものです。

 ドラッグ&ドロップを受け入れ可能にするためには、その要素でondropとondragoverイベントハンドラを用意する必要があります。 送り側の要素では、draggable属性をtrue (draggable="true") にする必要があります。

<div id="div1" class="drop" ondrop="drop(event)" ondragover="allowDrop(event)">ここにドロップ</div>
<p id="p1" draggable="true" ondragstart="drag(event)">
ドラッグ可能なテキスト
</p>

ここにドロップ

ドラッグ可能なテキスト

 このコードはイベントハンドラの例です。allowDropとdragはほぼ決まりきった書き方です。dropはドロップされたときのハンドラでdataTransfer.getDataメソッドで送り元の要素のIDを取得し、そこからその要素の内容を取得できます。

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text/plain", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var src = "#" + ev.dataTransfer.getData("text/plain");
  var txt = $(src).text();
  $("#div1").text(txt);
}

 

このページの先頭へ戻る