Top > SAStrutsあれこれ > Flexでドラッグ&ドロップ

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF" themeColor="#CAD01B">
    <mx:Script>
    <![CDATA[
        import mx.managers.DragManager;
        import mx.collections.ArrayCollection;
        import mx.events.DragEvent;
        
        [Bindable]
        public var items:Array = 
                [{num:'001', name:'鉛筆', price:100},
                 {num:'002', name:'消しゴム', price:150},
                 {num:'003', name:'ボールペン', price:200},
                 {num:'004', name:'万年筆', price:2000}];
    
        //ドロップターゲットにドラッグされたときのdragEnterイベントハンドラ
        //ここで、ドラッグソースが受付可能なものか判定したりします。
        private function dragEnterHandler(event:DragEvent):void{
            //ドロップを許可します。
            DragManager.acceptDragDrop(vbox);
        }
        
        //ドロップターゲットでドロップが許可された後、ドロップターゲットに
        //マウスを移動した際のdragOverイベントハンドラ
        private function dragOverHandler(event:DragEvent):void{
            //ゴミ箱エリアの枠を表示して、ドロップできる雰囲気を出します。
            vbox.setStyle("borderStyle", "solid");
        }
        
        //ドロップターゲットでドロップが許可された後、ドロップターゲットから
        //マウスが離れた際のdragExitイベントハンドラ
        private function dragExitHandler(event:DragEvent):void{
            //ゴミ箱エリアの枠を消して、ドロップできない雰囲気を出します。
            vbox.setStyle("borderStyle", "none");
        }
        
        //ドロップターゲットでドロップが許可された後、マウスをリリースして
        //ドロップ操作が実行されたときのdragDropイベントハンドラ
        private function dragDropHandler(event:DragEvent):void{
            //ドロップターゲットに対する処理を書いたりします。
        }
        
        //ドラッグ&ドロップ操作が正しく実行されたときに、ドラッグイニシエータ
        //で発生するdragCompleteイベントのハンドラ。
        //※ただし、ドロップ不可領域でマウスをリリースしても呼ばれます。
        // なので、actionでの処理分岐が必要になります。
        private function dragCompleteHandler(event:DragEvent):void{
            vbox.setStyle("borderStyle", "none");
            
            if( event.action != DragManager.MOVE ) {
                //MOVE以外のアクション(つまりドロップが行われていない場合)は無視
                return;
            }
            
            //これは、おまけです。ドラッグソースからドラッギング中のデータを
            //取り出しています。ドラッグソースがビルトインドラッグ & ドロップが
            //サポートされている他のすべてのリストベースコントロールでは、形式は
            // "items" となります。また、コントロールがツリーの場合、形式は "treeItems"。
            var tmp:Array = event.dragSource.dataForFormat("items") as Array;
            trace("name:" + tmp[0].name + " price:" + tmp[0].price);
            
            //D&Dしたレコードを削除します。
            var dg:DataGrid = event.dragInitiator as DataGrid;
            var ac:ArrayCollection = dg.dataProvider as ArrayCollection;
            
            for each( var index:int in dg.selectedIndices ) {
                ac.removeItemAt(index);
            }
        }
    ]]>
    </mx:Script>
    
    <mx:DataGrid id="datagrid1" allowMultipleSelection="true" dataProvider="{items}" 
        dragEnabled="true" dragComplete="dragCompleteHandler(event)">
        <mx:columns>
            <mx:Array>
                <mx:DataGridColumn headerText="商品番号" dataField="num" />
                <mx:DataGridColumn headerText="商品名" dataField="name" />
                <mx:DataGridColumn headerText="値段" dataField="price" />
            </mx:Array>
        </mx:columns>
    </mx:DataGrid>
    
    <mx:VBox id="vbox" width="150" height="80" 
        dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" 
        dragDrop="dragDropHandler(event)" dragExit="dragExitHandler(event)"
        backgroundColor="#F4F399" borderThickness="3">
      <mx:TextArea id="dustBox" width="100%" height="100%" text="ごみ箱のイメージと&#xa;思いねぇ。。。&#xa;ここにドロップすると削除されます。" textAlign="left" editable="false" backgroundAlpha="0.0"/>
    </mx:VBox>
    
</mx:Application>
Everything is expanded.Everything is shortened.
  1
  2
  3
  4
-
|
|
!
            for each( var index:int in dg.selectedIndices ) {
                trace("削除index => " + index);
                ac.removeItemAt(index);
            }
  0
  1
削除index => 3
削除index => 2
削除index => 1

添付ファイル: fileflex_dd_grid1_3.jpg 328件 [詳細] fileflex_dd_grid1_2.jpg 340件 [詳細] fileflex_dd_grid1_1.jpg 340件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:26:00 (2921d)