| « nsIConsoleService | Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （その2～ドラッグ処理） » |
Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （その1～イベントハンドラの追加）
Firefox 3.1 (b1pre) にて HTML 5 のドラッグ＆ドロップ API が実装され、 HTML の Web アプリ、 XUL の拡張機能のいずれからも同じように利用可能となった。
拡張機能開発者としては、ドラッグ＆ドロップに関する各種処理を、 XPCOM サービスの nsIDragService や面倒くさい nsDragAndDrop.js を使わずに、単純な DOM の API のみで記述できるようになったので、非常にありがたい。
ドラッグ＆ドロップのイベント
ドラッグ＆ドロップ操作時、ドラッグ元の要素とドロップ先の要素において、以下のようなイベントが発生する。
| イベント名 (event.type) | イベント発生対象 (event.target) | イベント発生のタイミング |
|---|---|---|
| dragstart | ドラッグ元 | ドラッグ開始時 |
| drag | ドラッグ元 | ドラッグ中 |
| dragend | ドラッグ元 | ドラッグ終了時 |
| dragenter | ドロップ先 | ドラッグオーバー開始時 |
| dragover | ドロップ先 | ドラッグオーバー中 |
| dragleave | ドロップ先 | ドラッグオーバー終了時 |
| drop | ドロップ先 | ドロップ時 |
サンプルコード (HTML)
2つの div 要素を配置し、一方をドラッグ元、もう一方をドロップ先とする。
ドラッグ元となる div 要素には、「draggable=”true”」属性をセットしなければならない。ただし、リンク（a 要素）や画像 （img 要素）などは、「draggable=”true”」を指定しなくても自動的にドラッグ可能となる。
ドラッグ元の要素には ondragstart, ondrag, ondragend の3つのイベントハンドラを追加し、ドロップ先の要素には ondragenter, ondragover, ondragleave, ondrop の4つのイベントハンドラを追加する。ただし、必要最低限のドラッグ＆ドロップを実装するのであれば、 ondrag, ondragend, ondragleave は省略しても問題ない。
<html>
<head>
<title>Drag and Drop Test</title>
<script type="text/javascript" src="dragdrop.js"></script>
</head>
<body>
<div id="DragSource"
draggable="true"
ondragstart="handleDragEvents(event);"
ondrag="handleDragEvents(event);"
ondragend="handleDragEvents(event);"
style="border: 1px solid black; padding: 50px; margin: 10px;">Drag Source</div>
<div id="DropTarget"
ondragenter="handleDropEvents(event);"
ondragover="handleDropEvents(event);"
ondragleave="handleDropEvents(event);"
ondrop="handleDropEvents(event);"
style="border: 1px solid black; padding: 50px; margin: 10px;">Drop Target</div>
<a href="http://www.mozilla.org/">http://www.mozilla.org/</a>
<img src="http://www.mozilla.org/images/poweredby_200.gif">
</body>
</html>
サンプルコード (XUL)
2つの xul:label 要素を配置し、一方をドラッグ元、もう一方をドロップ先とする。 HTML の場合とほぼ同じであるが、すべての XUL 要素はドラッグ可能となりうるため、「draggable=”true”」属性を指定する必要は無い。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Drag and Drop Test"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="dragdrop.js" />
<label id="DragSource"
value="Drag Source"
ondragstart="handleDragEvents(event);"
ondrag="handleDragEvents(event);"
ondragend="handleDragEvents(event);"
style="border: 1px solid black; padding: 50px; margin: 10px;" />
<label id="DropTarget"
value="Drop Target"
ondragenter="handleDropEvents(event);"
ondragover="handleDropEvents(event);"
ondragleave="handleDropEvents(event);"
ondrop="handleDropEvents(event);"
style="border: 1px solid black; padding: 50px; margin: 10px;" />
</window>
サンプルコード (JavaScript)
JavaScript のソースコードは、 HTML と XUL の両者に共通となる。また、動作させるために chrome 権限は必要ない。
今回はとりあえず以下のような雛形的なイベントハンドラの処理を作っておき、あとで処理を追加する。
なお、サンプルコードでは window.dump メソッドを使用する。
function handleDragEvents(event) {
dump("[" + event.target.id + "] " + event.type + "
");
switch (event.type) {
case "dragstart":
break;
case "drag":
break;
case "dragend":
break;
}
}
function handleDropEvents(event) {
dump("[" + event.target.id + "] " + event.type + "
");
switch (event.type) {
case "dragenter":
case "dragover":
break;
case "dragleave":
break;
case "drop":
break;
}
}
動作確認
現段階ではドラッグ元をドラッグ開始した際の dragstart イベントしか発生しませんが、実際にドラッグしてイベントが発生することを確認してください。
参考
関連記事
Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （その1～イベントハンドラの追加）
Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （その2～ドラッグ処理）
Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （その3～ドロップ処理）
scrapbook使わせてもらっています。
Fxで一番のアドオンだと思っています。
大変重宝しているのですが、Fx3で少し不具合があります。
マーカー機能とアノテーション機能です。
mozillaアドオンのフォーラムでも話題になっています。
私はOS・Fx3クリーンインストール＋scrapbookだけで試しましたが、やはり症状が出ました。
なぜかこの不具合が出ない人もいるようなので不思議です。
お忙しいでしょうが、fixしていただけると幸いです。
環境はwindowsXPsp3です。
マーカー機能の不具合とは、
画面の下に出るscrapbookバー（？）で、
複数のマーカーから色を選ぶ際にポップアップ（マーカー1、マーカー2…）が出る際、
色が無いので選びにくいというものです。
「scrapbook＋」というアドオンを併用すると何とか色はわかるようになるのでやり過ごしています。
[…] SCRAPBLOG : Firefox 3.1 の新しいドラッグ＆ドロップ API の基本的な使い方 （そ�… (tags: firefox) […]