ドラッグ＆ドロップ処理の記述手順

ユーザーがキャンバス上でドラッグを開始したときは、DRAG_DRAG_GESTUREイベントが発行されます。発行されるイベントオブジェクトは、下記のとおりです。

<event:drag-source type="gesture" action="アクションタイプ " />

event:drag-start要素のaction属性には、アクションタイプを表す値が設定されます。アクションタイプはドロップターゲットによって実行されるアクションを表す値です。設定される値は、下記のとおりです。

copy

コピーアクションを表します。

move

移動アクションを表します。

link

リンクアクションを表します。

xvcd:action要素でDRAG_DRAG_GESTUREイベントを受け取ったら、必ずドラッグの開始処理を行います。ドラッグの開始処理を行うには、 xvcd:start-dragインストラクションを使用します。

ドラッグ中は、xvcd:start-dragインストラクションを呼び出したxvcd:action要素が割り付けられた要素に、イベントが発行されます。発行されるイベントオブジェクトは、下記のとおりです。このイベントは上の要素へバブリングしません。

• DRAG_DRAG_ENTERイベント
  ドラッグ中のポインタが特定のドロップターゲットの領域に入ったときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drag-source type="drag-enter" />

• DRAG_DRAG_OVERイベント
  ドラッグ中のポインタが特定のドロップターゲットの領域内で移動したときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drag-source type="drag-over" />

• DRAG_DRAG_EXITイベント
  ドラッグ中のポインタが特定のドロップターゲットの領域から出たときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drag-source type="drag-exit" />

受け取ったイベントに対して処理を行う必要がある場合は、適宜処理を行うように記述します。

ドラッグ＆ドロップ操作が終了したとき、xvcd:start-dragインストラクションを呼び出したxvcd:action要素が割り付けられた要素に、DRAG_DROP_ENDイベントが発行されます。DRAG_DROP_ENDイベントは上の要素へバブリングしません。発行されるイベントオブジェクトは、下記のとおりです。

<event:drag-source type="drop-end" result="実行結果" action="アクションタイプ" />

event:drag-source要素のresult属性の値には、実行結果を表す次の値が設定されます。

success

ドロップが成功したことを表します。

failure

ドロップが失敗したことを表します。

event:drag-source要素のaction属性に設定されるアクションタイプの値には、ドラッグ開始時と同じ３つの中から１つが設定されます。ドラッグ開始時とは異なる値が設定される可能性もあります。

DRAG_DROP_ENDイベントを受け取ったら、result属性の値とaction属性の値に従って必要な処理を行うように記述します。

ドラッグソース側のXVCD処理の典型的なパターンを、スケルトンとして記述します。 ドラッグ中の処理が不要な場合、不要な部分の記述は省略できます。

<xvcd:action event="event:drag-source">
    <instruction:param name="event:event"/>
    <instruction:variable name="source" select="$event:event/event:drag-source"/>

    <instruction:if test="$source/@type = 'gesture'">
        <xvcd:start-drag event="$event:event">
            <!--
                ドラッグされるXML文書フラグメントの取得手続きや、
                新規のXML文書フラグメントなどを記述します。
            -->
        </xvcd:start-drag>
    </instruction:if>

    <instruction:if test="$source/@type = 'drag-enter'">
        <!-- DRAG_DRAG_ENTERイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$source/@type = 'drag-over'">
        <!-- DRAG_DRAG_OVERイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$source/@type = 'drag-exit'">
        <!-- DRAG_DRAG_EXITイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$source/@type = 'drop-end'">
        <instruction:if test="$source/@result = 'success'">
            <instruction:if test="$source/@action = 'copy'">
                <!-- ドロップ成功時のコピーの処理を記述します。 -->
            </instruction:if>
            <instruction:if test="$source/@action='move'">
                <!-- ドロップ成功時の移動の処理を記述します。 -->
            </instruction:if>
        </instruction:if>
    </instruction:if>

</xvcd:action>

ドラッグ中は、ドロップターゲットのxvcd:action要素にイベントが発行されます。発行されるイベントオブジェクトは、下記のとおりです。

• DROP_DRAG_ENTERイベント
  ドラッグ中のポインタがドロップターゲットの領域に入ったときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drop-target type="drag-enter" action="アクションタイプ " >
      <dtf:string>
          <!-- ドラッグされる内容をテキスト形式で表現したデータ -->
      </dtf:string>
      <dtf:fragment>
          <!-- ドラッグされる内容をXML文書フラグメントで表現したデータ -->
      </dtf:fragment>
  </event:drop-target>

• DROP_DRAG_OVERイベント
  ドラッグ中のポインタがドロップターゲットの領域内で移動したときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drop-target type="drag-over" action="アクションタイプ " >
      <dtf:string>
          <!-- ドラッグされる内容をテキスト形式で表現したデータ -->
      </dtf:string>
      <dtf:fragment>
          <!-- ドラッグされる内容をXML文書フラグメントで表現したデータ -->
      </dtf:fragment>
  </event:drop-target>

• DROP_DRAG_EXITイベント
  ドラッグ中のポインタがドロップターゲットの領域から出たときに発行されます。発行されるイベントオブジェクトは、下記のとおりです。

  <event:drop-target type="drag-exit" action="アクションタイプ " >
      <dtf:string>
          <!-- ドラッグされる内容をテキスト形式で表現したデータ -->
      </dtf:string>
      <dtf:fragment>
          <!-- ドラッグされる内容をXML文書フラグメントで表現したデータ -->
      </dtf:fragment>
  </event:drop-target>

それぞれのevent:drop-target要素のaction属性には、アクションタイプを表す値が設定されます。アクションタイプはドロップターゲットによって実行されるアクションを表す値です。設定される値は、下記のとおりです。

copy

コピーアクションを表します。

move

移動アクションを表します。

link

リンクアクションを表します。

受け取ったイベントに対して処理を行う必要がある場合は、適宜処理を行うように記述します。

ドロップ操作が終了したとき、ドロップ操作が行われたドラッグターゲットに対して、DROP_DROPイベントが発行されます。発行されるイベントオブジェクトは、下記のとおりです。

<event:drop-target type="drop" action="アクションタイプ " >
    <dtf:string>
        <!-- ドラッグされる内容をテキスト形式で表現したデータ -->
    </dtf:string>
    <dtf:fragment>
        <!-- ドラッグされる内容をXML文書フラグメントで表現したデータ -->
    </dtf:fragment>
</event:drop-target>

event:drop-target要素のaction属性に設定されるアクションタイプの値の種類は、ドラッグ中と同じ３つの中から１つが設定されます。ドラッグ中とは異なる値が設定される可能性もあります。

DROP_DROPイベントを受け取ったら、action属性の値に従って必要な処理を行うように記述します。

ドロップターゲット側のXVCD処理の典型的なパターンを、スケルトンとして記述します。

スケルトン中の斜体文字で記述されている QName は、実際に使用する場面での適切な要素名に置き換えます。 また、ドラッグ中の処理が不要な場合、不要な部分の記述は省略できます。

<xvcd:action event="event:drop-target[dtf:fragment/QName]">
    <instruction:param name="event:event" />
    <instruction:variable name="target" select="$event:event/event:drop-target" />

    <instruction:if test="$target/@type = 'drag-enter'">
        <!-- DROP_DRAG_ENTERイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$target/@type = 'drag-over'">
        <!-- DROP_DRAG_OVERイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$target/@type = 'drag-exit'">
        <!-- DROP_DRAG_EXITイベントに対する処理が必要ならば、ここに記述します。-->
    </instruction:if>

    <instruction:if test="$target/@type = 'drop'">
        <instruction:if test="$target/@action = 'copy'">
            <!-- ドロップ成功時のコピーの処理を記述します。-->
        </instruction:if>
        <instruction:if test="$target/@action = 'move'">
            <!-- ドロップ成功時の移動の処理を記述します。-->
        </instruction:if>
    </instruction:if>

</xvcd:action>