ドラッグ&ドロップ (drag and drop)

<description value="AA"
  ondragstart="event.dataTransfer.setData( 'text/plain', 'BB' )" />

このdescription要素は「AA」というテキストを表示し、それをドラッグして'text/plain'を受け入れるコントロールへドロップすると、そこに「BB」というテキストが挿入されます。

DragEvent

DataTransferオブジェクト

データの受け渡し

データを渡す

void setData(
    in String type, // 追加するデータの型
    in String data  // 追加するデータ
    );

setDate()をくり返し呼ぶことで、ドラッグ データには複数のデータを追加できます。そのとき同じtypeがすでに追加されていた場合には、前のデータが置換されます。

typeには次項のドラッグ型、もしくは独自に定義した型を指定します。

データを受け取る

String getData(
    in String type
    );

typeのデータを受け取れます。指定の型が存在しなかったり、そもそもデータが含まれていない場合には空文字が返されます。先に含まれている型を知りたいならば、typesプロパティで確認できます。

このメソッドにより返されるデータは、つねに文字列です。

ドラッグの型 (Drag Types)

event.dataTransfer.setData( 'text/plain', 'This is text to drag' )

var dt = event.dataTransfer;
dt.setData( 'text/uri-list', 'http://www.mozilla.org' );
dt.setData( 'text/plain', 'http://www.mozilla.org' );

var dt = event.dataTransfer;
dt.setData( 'text/html', 'Hello there, <strong>stranger</strong>' );
dt.setData( 'text/plain', 'Hello there, stranger' );

event.dataTransfer.mozSetDataAt( 'application/x-moz-file', file, 0 );

var dt = event.dataTransfer;
dt.mozSetDataAt( 'image/png', stream, 0 );
dt.mozSetDataAt( 'application/x-moz-file', file, 0 );
dt.setData( 'text/uri-list', imageurl );
dt.setData( 'text/plain', imageurl );

event.dataTransfer.setData( 'application/x-moz-node', '' )

独自に定義したデータには、独自のデータ型を定義できます。しかしその場合にも、代替のテキスト データを提供することが推奨されます。

ドラッグの効果 (Drag Effects)

ドラッグ元のデータについて、どの操作を許可するのか明示します。

event.dataTransfer.effectAllowed = 'copy';

このeffectAllowedプロパティには、下表のいずれかの値を指定します。

これらの操作は、たとえばエクスプローラでファイルをドラッグする場合には、ファイルのコピー、移動、リンクの作成に相当します。

HTMLへの適用

draggable属性

HTMLの要素でもそれにdraggable属性を設定することで、ドラッグ&ドロップをカスタマイズできます。

<span draggable="true"
  ondragstart="event.dataTransfer.setData( 'text/plain', 'BB' )">AA</span>

• 開発環境の構築
  • 開発ツール
• アドオンの開発手順
  • Install Manifest
  • デバッグ
• UI (Chrome)
  • Chrome Manifest
  • XUL
    • オーバーレイ
    • スキン
    • イベント
    • XUL要素
      • ウィンドウ
      • ブラウザ
      • コントロール
    • スタイル (CSS)
    • スクリプト (JavaScript)
  • ローカライズ
• XPCOM
  • 利用例
• ネットワーク
• データベース
• データ永続化
  • ユーザー設定
• サンプルコード
  • アドオンのソース
• アドオンの配布

• お問い合わせ
• プライバシーポリシー
• サイトマップ