IDE内

データ・フレーバでドロップ・ターゲットを指定して、そのドロップ・ターゲットにドロップ・イベント・リスナーを登録するステップが完了すると、ビジュアル・エディタは次のように表示されます。

XMLソース・エディタでは、単一選択リストボックス・コンポーネントのコードは次のように表示されます。

                         
<af:panelGroupLayout ..>
  <af:selectOneListbox label="Beverage choices">
    <f:selectItems value="#{dnd.choices}"/>
  </af:selectOneListbox>
  <af:dropTarget dropListener="#{dnd.handleItemDrop}">
    <af:dataFlavor flavorClass="java.lang.String"/>
  </af:dropTarget>
</af:panelGroupLayout>
                      

ページを実行すると、ブラウザ内に次のようなページが表示されます。

イメージをドラッグして、Beverage choicesのリストの上にドロップします。 イメージをページ上の受入れ可能なドロップ領域にドラッグすると、コンポーネントの背景色が変化します。 マウス・ボタンを離してイメージをリストにドロップすると、既存の選択肢のリストに新しい項目として追加された Coffeeが表示されます。

ドロップ操作が正常に完了すると、ドロップ・ターゲット（この例では、単一選択リストボックスで囲まれているパネル・グループ・レイアウト・ラッパー・コンポーネント）は部分ページ・レンダリングによってレンダリングされ、項目のリストに追加したドロップされた値がリストボックスに表示されるようになります。