フォーラム一覧   -   トピック一覧
   超ビギナー
     DataGridからTreeへのドラッグアンドドロップ時のドロップ先情報について		投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
inuko
投稿日時: 2010-3-9 20:24
一見さん
登録日: 2010-3-9
居住地:
投稿: 2
DataGridからTreeへのドラッグアンドドロップ時のドロップ先情報について
お世話になっております。

DataGridに表示している情報をTreeにドラッグアンドドロップで移動させたいです。
treeを開いた状態でDropする場合に
----------------------------
root
　┣Folder1
　┃ ┣item1
　┃ ┗item2
　┗Folder2
　 　┗item3
　　　　￣￣￣
----------------------------
のように線が出る場合はFolder2の配下には<item>要素を追加し

----------------------------
root
　┣Folder1
　┃ ┣item1
　┃ ┗item2
　┗Folder2
　　　┗item3
　　￣￣￣￣￣
----------------------------
の場合はrootの配下に<node>要素を追加したいと考えているのですが

calculateDropIndexを使用してtreeの選択状態を取得し
その時のselectedItemの値がどちらも「item3」になってしまっていて
rootとして追加する事が出来ません。

この場合、適切な取得方法があるのでしょうか？

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    creationComplete="creationCompleteHandler()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.DragSource;
            import mx.managers.DragManager;
            import mx.core.UIComponent;
            import mx.collections.ArrayCollection;
            import mx.events.DragEvent;
            [Bindable]
            private var gridSource:ArrayCollection;

            [Bindable]
            private var treeDataSource:XML =
                <root label="root">
                    <node label="Folder1" isBranch="true">
                        <item label="item1"/>
                        <item label="item2"/>
                    </node>
                    <node label="Folder2" isBranch="true">
                        <item label="item3"/>
                    </node>
                </root>;

            private function creationCompleteHandler():void {
                gridSource = new ArrayCollection([
                    {id:1, value:"追加Item1"}, {id:2, value:"追加Item2"}
                ]);
            }

            private function treeDragEnterHandler(e:DragEvent):void {
                if(UIComponent(e.dragInitiator).id == "datagrid1") {
                    DragManager.acceptDragDrop(UIComponent(e.target));
                }
            }

            private function treeDragOverHandler(e:DragEvent):void {
                tree.showDropFeedback(e);
            }

            private function treeDragDropHandler(e:DragEvent):void {
                e.preventDefault();

                var toComp:Tree = e.currentTarget as Tree;

                var draggedFormat:String = e.dragSource.formats[0];

                var draggedItems:Array = e.dragSource.dataForFormat(draggedFormat) as Array;
                var dropIndex:int = toComp.calculateDropIndex(e);

                toComp.selectedIndex = dropIndex;

                var item:XML = <item></item>;

                for each( var obj:Object in draggedItems ) {
                    if ((toComp.selectedItem as XML).name() == "root") {
                        item = <node></node>;
                        item.@isBranch = "true";
                        item.@label = obj.value;
                        (toComp.selectedItem as XML).appendChild(item);
                    } else {
                        item = <item></item>;
                        item.@label = obj.value;

                        if((toComp.selectedItem as XML).name() == "node") {
                            (toComp.selectedItem as XML).appendChild(item);
                        } else {
                            (toComp.selectedItem as XML).parent().appendChild(item);
                        }
                   }
                }
                toComp.selectedIndex = -1;
                tree.hideDropFeedback(e);
                datagrid1.hideDropFeedback(e);
            }

            private function treeDragExitHandler(e:DragEvent):void {
                tree.hideDropFeedback(e);
            }

            private function dgDragCompleteHandler(e:DragEvent):void {
                gridSource.removeItemAt(datagrid1.selectedIndex);
            }
        ]]>
    </mx:Script>
    <mx:Tree id="tree" labelField="@label" showRoot="true" width="160"
            dataProvider="{treeDataSource}"
            dragEnter="treeDragEnterHandler(event)"
            dragOver="treeDragOverHandler(event)"
            dragDrop="treeDragDropHandler(event)"
            dragExit="treeDragExitHandler(event)">
    </mx:Tree>
    <mx:DataGrid id="datagrid1" dataProvider="{gridSource}" dragEnabled="true" dragComplete="dgDragCompleteHandler(event)">
        <mx:columns>
            <mx:DataGridColumn dataField="id" />
            <mx:DataGridColumn dataField="value" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
inuko
投稿日時: 2010-3-11 10:35
一見さん
登録日: 2010-3-9
居住地:
投稿: 2
Re: DataGridからTreeへのドラッグアンドドロップ時のドロップ先情報について
お世話になっております。
投稿後に調べた結果、正常動作に至りましたので報告させていただきます。

修正したソースはこちらになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    creationComplete="creationCompleteHandler()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.DragSource;
            import mx.managers.DragManager;
            import mx.core.UIComponent;
            import mx.collections.ArrayCollection;
            import mx.events.DragEvent;
            [Bindable]
            private var gridSource:ArrayCollection;

            [Bindable]
            private var treeDataSource:XML =
                <root label="root">
                    <node label="Folder1" isBranch="true">
                        <item label="item1"/>
                        <item label="item2"/>
                    </node>
                    <node label="Folder2" isBranch="true">
                        <item label="item3"/>
                    </node>
                </root>;

            private function creationCompleteHandler():void {
                gridSource = new ArrayCollection([
                    {id:1, value:"追加Item1"}, {id:2, value:"追加Item2"}
                ]);
            }

            private function treeDragEnterHandler(e:DragEvent):void {
                if(UIComponent(e.dragInitiator).id == "datagrid1") {
                    DragManager.acceptDragDrop(UIComponent(e.target));
                }
            }

            private function treeDragOverHandler(e:DragEvent):void {
                tree.showDropFeedback(e);
            }

            private function treeDragDropHandler(e:DragEvent):void {
                e.preventDefault();

                var toComp:Tree = e.currentTarget as Tree;

                var draggedFormat:String = e.dragSource.formats[0];

                var draggedItems:Array = e.dragSource.dataForFormat(draggedFormat) as Array;

				var dropData:Object = toComp.mx_internal::_dropData;

				var dropXML:XML;
				dropXML = dropData.parent as XML;

				if (dropXML == null) {
					Alert.show("最上位への追加は出来ません");
					return;
				}

                var item:XML = <item></item>;

				var obj:Object = draggedItems[0];

				if (dropXML.name() == "root") {
                    item = <node></node>;
                    item.@isBranch = "true";
                    item.@label = obj.value;
                    dropXML.appendChild(item);
                } else {
                    item = <item></item>;
                    item.@label = obj.value;
					dropXML.appendChild(item);
                }
                toComp.selectedIndex = -1;
                tree.hideDropFeedback(e);
                datagrid1.hideDropFeedback(e);
            }

            private function treeDragExitHandler(e:DragEvent):void {
                tree.hideDropFeedback(e);
            }

            private function dgDragCompleteHandler(e:DragEvent):void {
                gridSource.removeItemAt(datagrid1.selectedIndex);
            }
        ]]>
    </mx:Script>
    <mx:Tree id="tree" labelField="@label" showRoot="true" width="160"
            dataProvider="{treeDataSource}"
            dragEnter="treeDragEnterHandler(event)"
            dragOver="treeDragOverHandler(event)"
            dragDrop="treeDragDropHandler(event)"
            dragExit="treeDragExitHandler(event)">
    </mx:Tree>
    <mx:DataGrid id="datagrid1" dataProvider="{gridSource}" dragEnabled="true" dragComplete="dgDragCompleteHandler(event)">
        <mx:columns>
            <mx:DataGridColumn dataField="id" />
            <mx:DataGridColumn dataField="value" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>


「tree.mx_internal::_dropData」
と記述し、Treeの"_dropData"の情報を取得
その値のparentに対してaddChildすることで正常なドロップ動作となりました。

以上、ご報告とさせていただきます。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を