次のコントロールでは、ドラッグ＆ドロップ操作がビルトインでサポートされています。

• DataGrid
• HorizontalList
• List
• PrintDataGrid
• TileList
• Tree

これらのコントロールのビルトインサポートを使用すると、ドラッグが有効なコントロールからドロップが有効なコントロールへアイテムをドラッグすることにより、アイテムを移動できます。ただし、アイテムをコピーする場合は、ロジックを追加する必要があります。詳細については、データの移動とコピーを参照してください。

次のドラッグ＆ドロップの例では、List コントロールから別の List コントロールにアイテムを移動します。

<?xml version="1.0"?>
<!-- dragdrop\SimpleListToListMove.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp();">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private function initApp():void {
                srclist.dataProvider = 
                    new ArrayCollection(['Reading', 'Television', 'Movies']);
                destlist.dataProvider = new ArrayCollection([]);
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:VBox>
            <mx:Label text="Available Activities"/>
            <mx:List id="srclist" 
                allowMultipleSelection="true"
                dragEnabled="true"
                dragMoveEnabled="true"/>
        </mx:VBox>

        <mx:VBox>
            <mx:Label text="Activities I Like"/>
            <mx:List id="destlist" 
                dropEnabled="true"/>
        </mx:VBox>
    </mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

最初の List コントロールの dragEnabled プロパティを true に設定し、2 番目の List コントロールの dropEnabled プロパティを true に設定することで、ユーザーが最初のリストから次のリストへアイテムをドラッグできるようになります。背後で実行されるイベント処理をユーザーが気にすることはありません。

Tree コントロールを除くすべてのリストクラスでは、dragMoveEnabled プロパティのデフォルト値が false なので、あるコントロールから別のコントロールにエレメントだけをコピーできます。最初の List コントロールで dragMoveEnabled を true に設定すると、データの移動とコピーが可能になります。Tree コントロールでは、dragMoveEnabled プロパティのデフォルト値は true です。

dragMoveEnabled プロパティが true に設定されると、デフォルトのドラッグ＆ドロップアクションはドラッグデータの移動になります。コピーを行うには、ドラッグ＆ドロップ操作中に Ctrl キーを押したままにします。

ドラッグ＆ドロップ操作の唯一の要件は、データプロバイダの構造が 2 つのコントロールの間で一致する必要があることだけです。この例では、srclist のデータプロバイダはストリングの配列であり、ターゲットの List コントロールのデータプロバイダは空の配列です。destlist のデータプロバイダが他のデータ型の配列の場合、ドラッグされたデータが destlist で正しく表示されないことがあります。

ドラッグ＆ドロップ操作の一環として、ドラッグされたデータを変更して、ターゲットと互換になるようにすることができます。データフォーマットが一致しない場合に、あるコントロールから別のコントロールにデータをドラッグする操作の例については、例：List コントロールから DataGrid コントロールへのデータのコピーを参照してください。

次の例で 2 つの DataGrid コントロールに対して行っているように、両方のリストコントロールの dragEnabled、dropEnabled および dragMoveEnabled プロパティを true に設定することで、双方向のドラッグ＆ドロップが可能になります。この例では、いずれの DataGrid コントロールからでも他方に行をドラッグ＆ドロップできます。

<?xml version="1.0"?>
<!-- dragdrop\SimpleDGToDG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp();">

    <mx:Script>
      <![CDATA[
          import mx.collections.ArrayCollection;
      
          private function initApp():void {
            srcgrid.dataProvider = new ArrayCollection([
              {Artist:'Carole King', Album:'Tapestry', Price:11.99},
              {Artist:'Paul Simon', Album:'Graceland', Price:10.99},
              {Artist:'Original Cast', Album:'Camelot', Price:12.99},
              {Artist:'The Beatles', Album:'The White Album', Price:11.99}
            ]);

            destgrid.dataProvider = new ArrayCollection([]);    
          }
      ]]>
    </mx:Script>

    <mx:HBox>
        <mx:VBox>
            <mx:Label text="Available Albums"/>
            <mx:DataGrid id="srcgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true">
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"/>
                    <mx:DataGridColumn dataField="Album"/>
                    <mx:DataGridColumn dataField="Price"/>
                </mx:columns>    
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox>
            <mx:Label text="Buy These Albums"/>
            <mx:DataGrid id="destgrid" 
                allowMultipleSelection="true" 
                dragEnabled="true" 
                dropEnabled="true" 
                dragMoveEnabled="true">
                <mx:columns>
                    <mx:DataGridColumn dataField="Artist"/>
                    <mx:DataGridColumn dataField="Album"/>
                    <mx:DataGridColumn dataField="Price"/>
                </mx:columns>    
            </mx:DataGrid>
        </mx:VBox>
    </mx:HBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

同じコントロール内でのドラッグ＆ドロップ

ドラッグ＆ドロップを使用すると、リストコントロールのアイテムを同じコントロール内でドラッグ＆ドロップすることにより再編成できます。次の例では、Tree コントロールを定義し、ユーザーがドラッグ＆ドロップを使用して Tree コントロールのノードを再編成できるようにします。この例では、Tree コントロールの dragEnabled プロパティおよび dropEnabled プロパティを true に設定します（Tree コントロールでは、dragMoveEnabled プロパティのデフォルトは true です）。

<?xml version="1.0"?>
<!-- dragdrop\SimpleTreeSelf.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            // Initialize the data provider for the Tree.
            private function initApp():void {
                firstList.dataProvider = treeDP;
            }
        ]]>
    </mx:Script>
    
    <mx:XML id="treeDP">
        <node label="Mail">
            <node label="Inbox"/>
            <node label="Personal Folder">
                <node label="Demo"/>
                <node label="Personal"/>
                <node label="Saved Mail"/>
                <node label="bar"/>
            </node>
            <node label="Calendar"/>
            <node label="Sent"/>
            <node label="Trash"/>
        </node>
    </mx:XML>

    <mx:Tree id="firstList" 
        showRoot="false"
        labelField="@label"
        dragEnabled="true" 
        dropEnabled="true" 
        allowMultipleSelection="true"
        creationComplete="initApp();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

リストコントロールのドラッグ＆ドロッププロパティ

リストコントロールには、ドラッグ＆ドロップ操作を管理するためのプロパティとメソッドがあります。次の表に、そのプロパティとメソッドの一覧を示します。

コピー中の型情報の維持

リストコントロールのビルトインサポートを使用して、リストコントロールから別のリストコントロールへデータをコピーする場合、コピーデータのデータ型情報が失われる場合があります。データ型情報は、次のような場合に失われる可能性があります。

• 2 つのリストコントロール間でコピー操作を実行した場合。移動操作ではこの現象は発生しません。
• コピーされたアイテムのデータ型が、Date、Number、Object、String など、ActionScript の基本的なデータ型ではない場合。
• コピーされたアイテムのデータ型が、DisplayObject または DisplayObject のサブクラスではない場合。

例えば、次の Car.as というクラスを定義し、List コントロールのデータプロバイダを生成するのに使用します。

package
{
    // dragdrop/Car.as
    
    [RemoteClass]
    public class Car extends Object
    {
        // Constructor.
        public function Car()
        {
            super();
        }
        
        // Class properties.
        public var numWheels:int;
        public var model:String;
        public var make:String;
        
        public function get label():String
        {
            return make + " " + model;
        }        
    }
}

Car.as ファイルには [RemoteClass] メタデータタグが含まれていることに注意してください。このメタデータタグは、Car データ型を Flex に登録する際、コピー処理中にこのデータ型情報を保持するために必要になります。[RemoteClass] メタデータタグを省略すると、型情報は失われます。

次の例に示すように、このクラスをアプリケーションで使用します。

<?xml version="1.0"?>
<!-- dragdrop\DandDRemoteClassListUpdated.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns="*">

    <mx:Script>
        <![CDATA[
        
            public function changeit():void
            {
                if (list2.dataProvider != null)
                {                
                    msg.text += list2.dataProvider[0]
                    
                    if(list2.dataProvider[0] is Car)
                        msg.text += " Is Car\n";
                    else
                        msg.text += " Is NOT Car\n";
                }
            }
        ]]>
    </mx:Script>

    <mx:List id="list1" 
        x="10" y="45" 
        width="160" height="120" 
        dragEnabled="true" 
        dragMoveEnabled="true">
        <mx:dataProvider>
            <mx:Array>
                <Car model="Camry" make="Toyota" numWheels="4"/>
                <Car model="Prius" make="Toyota" numWheels="4"/>
            </mx:Array>
       </mx:dataProvider>
    </mx:List>

    <mx:List  id="list2"
        x="200" y="45" 
        width="160" height="120" 
        dropEnabled="true"/>
    
    <mx:Button label="Access it as button" click="changeit();"/>
    
    <mx:TextArea id="msg"  
        x="10" y="200"
        width="400" height="100"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。