Web Kit DOM Programming Topics: JavaScriptからのドラッグ＆ドロップの使用

Safari、Dashboard、およびWeb Kitベースアプリケーションには、HTMLページ内でのドラッグ＆ドロップ操作をカスタマイズするためのサポートが含まれています。

Contents:

JavaScriptのドラッグ＆ドロップの紹介

ドラッグ＆ドロップ操作のサポートはJavaScriptで実装されており、HTMLページの個々の要素に適用できます。ドラッグ操作では、要素は次のJavaScriptイベントを処理できます。

ondragstartイベントは、ドラッグ操作を開始します。ドラッグ操作の開始または取り消しを選択的に行うハンドラを、このイベントに提供できます。ドラッグ操作を取り消すには、イベントオブジェクトのcancelDefaultメソッドを呼び出します。イベントを処理するには、effectAllowedプロパティに値を割り当て、ドラッグするデータをdataTransferオブジェクトに入れます。これらはイベントオブジェクトから取得できます。effectAllowedプロパティの詳細については、“ドラッグの作用の変更”を参照してください。ドラッグデータの処理に関する詳細については、“ドラッグしたデータの処理”を参照してください。

ドラッグが行われると、対象となった要素側で継続的にondragイベントが発生し、その要素に対してドラッグ中に何かタスクを実行する機会が与えられます。操作が完了すると、要素はondragendイベントを受け取り、ドラッグが成功したかどうかを報告します。

ドラッグが進んでいる間は、ドラッグされている内容のドロップ先として考えられる要素にイベントが送られます。これらの要素は次のイベントを処理できます。

ondragenterイベントとondragleaveイベントはそれぞれ、ユーザのマウスが要素の境界に入ったこと、または境界から出たことを要素に知らせることができます。これらのイベントを使ってカーソルを変更したり、特定の要素上にドロップできるかどうかのフィードバックを提供したりできます。マウスが要素の上にある間は、ondragoverイベントが継続的に送られ、その要素に対して必要な任意のタスクを実行する機会が与えられます。ユーザがマウスボタンと放すと、要素はondropイベントを受け取り、ドロップされた内容を取り込む機会が与えられます。

ondragenterイベントとondragoverイベントのハンドラを実装する場合は、そのイベントオブジェクトのpreventDefaultメソッドを呼び出す必要があります。このメソッドはパラメータを受け取らず、定義したハンドラが、これから受信するすべてのデータのレシーバとして機能することをWeb Kitに伝えます。このメソッドを呼び出さなければ、Web Kitがデータの受信を引き受けます。イベントが発生したという通知が必要ない場合は、preventDefaultを呼び出す必要はありません。

要素へのハンドラの追加

ドラッグ＆ドロップイベントのハンドラを、Webページの任意の要素に追加できます。ドラッグ＆ドロップ操作が開始すると、Web Kitはその操作の対象となる要素に、該当するハンドラがあるかどうか探します。その要素においてハンドラが定義されていない場合、Web Kitは、その親要素を1つ1つ上がり、ハンドラを定義している要素を探します。ハンドラを定義している要素が1つもなければ、Web Kitはデフォルトの動作を適用します。このプロセスを例示するために、Webページに次のような基本的なHTMLがあるものとします。

<body ondragstart="BodyDragHandler()"

        ondragend="BodyDragEndHandler()">

    <span ondragstart="SpanDragHandler()">Drag this text.</span>

</body>

ユーザがspanタグ内のテキストのドラッグ操作を開始すると、Web KitはSpanDragHandlerを呼び出してそのイベントを処理します。ドラッグ操作が終了すると、Web KitはBodyDragEndHandlerを呼び出してそのイベントを処理します。

要素をドラッグ可能にする

Web Kitは、ユーザが画像、リンク、選択テキストなどの一般的な項目をドラッグできるように、自動サポートを提供しています。このサポートを広げて、HTMLページ内の特定の要素を含めることができます。たとえば、特定のdivタグやspanタグをドラッグ可能としてマークするといったことができます。

任意の要素をドラッグ可能にするには、要素のスタイル定義に-khtml-user-drag属性を追加します。この属性はカスケーディングスタイルシート(CSS)属性であるため、スタイル定義の一部として、または要素タグのインラインスタイル属性として含めることができます。この属性の値の一覧を、Table 1に示します。

**Table 1** -khtml-user-drag属性の値
値	説明
`none`	この要素をドラッグすることはできません。
`element`	この要素をドラッグできます。
`auto`	要素をドラッグすべきかどうかを決めるためのデフォルトのロジックを使用します（画像、リンク、選択テキストはドラッグでき、それ以外の要素はドラッグできません）。これはデフォルト値です。

次の例は、この属性をspanタグ内で使い、タグ全体のドラッグを可能にする方法を示しています。ユーザがspanテキストをクリックすると、Web Kitはこれをドラッグ可能と見なし、ドラッグ操作を開始します。

ドラッグデータの処理

あるイベントが発生すると、ハンドラは、そのイベントにアタッチされているdataTransferオブジェクトを使ってクリップボードデータの取得と設定を行います。このオブジェクトはclearDataメソッド、getDataメソッド、setDataメソッドを定義して、ドラッグ用のペーストボード上のデータのクリア、取得、および設定を行うことができます。

他の多くのブラウザとは異なり、Web Kitのドラッグ＆ドロップの実装は、HTMLドキュメントで見られるデータタイプ以外にも、多数のデータタイプをサポートしています。getDataまたはsetDataを呼び出すときには、対象データのMIMEタイプを指定します。Web Kitは、認識しているタイプのそれぞれを、既知のペーストボードタイプにマップしています。しかし、自分のアプリケーションが認識する任意のカスタムデータ形式に対応するMIMEタイプを指定することもできます。大部分のドラッグ＆ドロップ操作では、おそらく、プレーンテキストやURIのリストなど、シンプルなデータタイプを扱うことになるでしょう。

アプリケーションと同様に、Web Kitは同じデータを複数の形式でペーストボードに貼り付ける機能もサポートしています。別の形式を追加するには、単に各形式ごとにsetDataを1回呼び出して、さまざまなMIMEタイプとそのタイプに適合するデータ文字列を指定します。

ペーストボードで現在利用可能なタイプのリストを参照するには、dataTransferオブジェクトのtypesプロパティを使用できます。このプロパティには、文字列の配列と利用可能なデータのMIMEタイプが含まれています。

ドラッグの作用の変更

ある場所から別の場所へ項目をドラッグするときに、その項目をドロップ先に永続的に移動することが必ずしも適切でない場合があります。ドラッグ元とドラッグ先のドキュメントの間でデータをコピーするか、またはリンクを作成することが望ましいことがあります。このような状況に対処するために、dataTransferオブジェクトのeffectAllowedプロパティとdropEffectプロパティを使って、データをどのように処理したいかを指定できます。

effectAllowedプロパティは、Web Kitに対して、ドラッグ元の要素がサポートしている操作の種類を知らせます。通常は、ondragstartイベントハンドラでこのプロパティを設定します。このプロパティの値は文字列であり、可能な値をTable 2に示します。

**Table 2** 要素のドラッグ＆ドロップのオプション
値	説明
`none`	要素に対してドラッグ操作を許可しません。
`copy`	要素の内容は、ドロップ先へのコピーのみが可能です。
`link`	要素の内容は、リンクを使って、ドラッグ元とドロップ先とで共有する必要があります。
`move`	要素の内容は、ドロップ先への移動のみが可能です。
`copyLink`	要素のコピーまたはリンクが可能です。
`copyMove`	要素のコピーまたは移動が可能です。これはデフォルト値です。
`linkMove`	要素のリンクまたは移動が可能です。
`all`	要素のコピー、移動、またはリンクが可能です。

dropEffectプロパティは、ドロップ先でサポートされている操作の1つを指定します（copy、move、linkまたはnone）。ondragenterイベントを受け取ったら、このプロパティをこれらの値の1つに、できればeffectAllowedプロパティにもリストされている値に設定する必要があります。このプロパティに値を指定しない場合、Web Kitは使用可能な操作に基づいて（effectAllowedに指定されているとおりに）選択します。コピー操作は移動操作よりも優先順位が高く、移動操作はリンク操作よりも優先順位が高く設定されています。

これらのプロパティがドラッグ元要素とドロップ先要素によって設定されていると、Web Kitは、ドラッグされた要素がドロップされるときに、どのタイプの操作を行うかについてユーザにフィードバックを表示します。たとえば、ドラッグされた要素がすべての操作をサポートしていても、ドロップ先がコピー操作しかサポートしていない場合、Web Kitはコピー操作が行われることを示すフィードバックを表示します。

ドラッグされた要素の表示の変更

ドラッグ操作の間、Web Kitはユーザにフィードバックを提供するために、ドラッグされている内容の画像をマウスの下に表示します。Web Kitによって使われるデフォルトの画像は、ドラッグ中の要素のスナップショットですが、必要に応じてこの画像を変更できます。

CSSによるスナップショットの変更

ドラッグ画像の外見を変更する最もシンプルな方法は、ドラッグ可能要素に対してカスケーディングスタイルシートエントリを使うことです。Web Kitは、-khtml-dragという擬似クラスを定義しており、これを使って、ドラッグ操作中に特定のクラスのスタイル定義を変更できます。この擬似クラスを使うには、変更したいクラスの名前で、空の新しいスタイルシートクラスエントリを作成し、次にコロンと文字列-khtml-dragを続けます。この新しいクラスのスタイル定義において、元の要素とドラッグ中の要素の間の相違を指定する属性を変更または追加します。

次の例は、ある要素のスタイルシート定義を示しています。標準的な表示の間は、要素の外見はdivSrc4クラスのスタイルシート定義で決まります。その要素がドラッグされると、Web Kitは背景色を、divSrc4:-khtml-drag擬似クラスで指定されている色と一致するように変更します。

#divSrc4 {

    display:inline-block;

    margin:6;

    position:relative;

    top:20px;

    width:100px;

    height:50px;

    background-color:rgb(202,232,255);

#divSrc4:-khtml-drag {

    background-color:rgb(255,255,154)

カスタムドラッグ画像の指定

要素のドラッグ画像を変更するもう1つの方法は、カスタム画像を指定することです。ドラッグ操作が始まるときに、dataTransferオブジェクトのsetDragImageメソッドを使用できます。このメソッドには次のような定義があります。

imageパラメータには、JavaScript Imageオブジェクトか、または別の要素を含めることができます。Imageオブジェクトを指定すると、Web Kitはその画像を要素のドラッグ画像として使います。要素を指定すると、Web Kitはその要素（および子要素）のスナップショットを受け取り、そのスナップショットをドラッグ画像として使います。

setDragImageのxパラメータとyパラメータは、マウスの真下に画像が置かれる地点を指定します。この値は通常、ドラッグを開始したマウスクリックの位置であり、ここに操作対象の要素の左上角が合わせられます。




	Get information on Apple products. Visit the Apple Store online or at retail locations. 1-800-MY-APPLE Copyright © 2007 Apple Inc. All rights reserved. \| Terms of use \| Privacy Notice