Home   Single Page

多種のドラッグ可能なコンポーネント

ドロップ可能なコンポーネントはすべてのドラッグ可能なコンポーネントを受け取らないことは一般的です。例えば、メールフォルダはメールだけ受け取り、他を拒否します。onDropが呼び出されたとき、受信できないコンポーネントを黙って無視するか、メッセージをアラートすることができます。

より良い視覚効果を表現するために、識別子を伴うドラッグ可能なコンポーネントのタイプを識別します。そのため、ドラッグ可能なプロパティに識別子を指定します。

<listitem draggable="email"/>
...
<listitem draggable="contact"/>

そして、識別子のリストをドロップ可能なものを設定するため、プロパティに値を指定できます。例えば、以下のイメージではemailとcontactだけを受信します。

<image src="/img/send.png" droppable="email, contact" onDrop="send(event.dragged)"/>

ドラッグ可能なコンポーネントを受信するのに、droppableプロパティにtrueを指定します。例えば、以下のイメージはドラッグ可能なコンポーネントを受信します。

<image src="/img/trash.png" droppable="true" onDrop="remove(event.dragged)"/>

一方で、draggableプロパティがtrueなら、コンポーネントは不明(anonymous)コンポーネントに属します。さらに、droppableプロパティがtrueに指定されたコンポーネントだけがそれを受信できます。