ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
フォーラム一覧   -   トピック一覧
   ActionScript 3.0
     ドラッグ&ドロップ(treeからpanel)
投稿するにはまず登録を

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
ram
投稿日時: 2009-8-10 23:02
やや お馴染みさん
登録日: 2009-8-10
居住地:
投稿: 5
ドラッグ&ドロップ(treeからpanel)
はじめまして。ramと申します。

コンポーネント「tree」から、コンポーネント「panel」へのドラッグ&ドロップについて教えて下さい。
ソース中、下記のlist部分をtreeに変更すると、右panelへのドロップが出来なくなってしまいます。

○そもそも、実装が可能なのか
○可能であれば、対応方法
以上2点、ご助言を頂ければ幸いでございます。
宜しくお願い致します。
----------------------------
<mx:List height="100%" dragEnabled="true" color="black">
<mx:Array>
<mx:String>○○</mx:String>
<mx:String>△△</mx:String>
<mx:String>▲▲</mx:String>
<mx:String>□□</mx:String>
</mx:Array>
</mx:List>
----------------------------



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top"
horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0">

<mx:Script>
import mx.managers.DragManager;
import mx.containers.ControlBar;
import mx.controls.*;
import flash.events.MouseEvent;
import mx.controls.Image;
import mx.controls.Label;
private function addToCart(event:MouseEvent):void {
Alert.show("ControlBar Button clicked.");
}
</mx:Script>

<mx:Script>
import mx.core.Container;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.controls.TextInput;
import mx.core.DragSource;
public function mouseDownHandler(event:MouseEvent):void {
var dragInitiator:Panel = event.currentTarget as Panel;
if (dragInitiator.contentMouseY >= 0) return;

var dragSource:DragSource = new DragSource();
dragSource.addData(dragInitiator, "dragInitiatorPanel");

var panelProxy:Panel = new Panel();
panelProxy.width=dragInitiator.width;
panelProxy.height=dragInitiator.height;
panelProxy.title=dragInitiator.title;
var t:TextInput = new TextInput();
t.text = "コピー中now";
panelProxy.addChild(t);
panelProxy.setStyle('backgroundColor', dragInitiator.getStyle('backgroundColor'));

DragManager.doDrag(dragInitiator, dragSource, event, panelProxy);
}

public function dragEnterHandler(event:DragEvent):void {
var dropTarget:Panel = event.currentTarget as Panel;
DragManager.acceptDragDrop(dropTarget);
}

public function dragOverHandler(event:DragEvent):void {
var dropTarget:Panel = event.currentTarget as Panel;
dropTarget.setStyle("backgroundAlpha", "0.3");
dropTarget.setStyle("borderStyle", "solid");
}

public function dragExitHandler(event:DragEvent):void {
var dropTarget:Panel = event.currentTarget as Panel;
dropTarget.setStyle("backgroundAlpha", "1.0");
dropTarget.setStyle("borderStyle", "default");
}

public function dragDropHandler(event:DragEvent):void {
var dropTarget:Panel = event.currentTarget as Panel;
var parentContainer:Container = dropTarget.parent as Container;


var dragInitiator:Panel = event.dragSource.dataForFormat("dragInitiatorPanel") as Panel;

var dragY:uint = dragInitiator.y;
var dragW:uint = dragInitiator.width;
var dragH:uint = dragInitiator.height;
//dropTarget.height = dragH;

var dropX:uint = dropTarget.x;
var dropY:uint = dropTarget.y;
var dropW:uint = dropTarget.width;
var dragX:uint = dragInitiator.x;
var dropH:uint = dropTarget.height;

//dragInitiator.x = dropX;
//dragInitiator.y = dropY;
//dragInitiator.width = dropW;
//dragInitiator.height = dropH;

//dropTarget.x = dragX;
//dropTarget.y = dragY;
//dropTarget.width = dragW;

var indexDrag:uint = parentContainer.getChildIndex(dragInitiator);
var indexDrop:uint = parentContainer.getChildIndex(dropTarget);

parentContainer.setChildIndex(dragInitiator, indexDrop);
parentContainer.setChildIndex(dropTarget, indexDrag);

dropTarget.setStyle("backgroundAlpha", "1.0");
dropTarget.setStyle("borderStyle", "default");
}
</mx:Script>

<mx:Panel title="Fruit" height="100%" color="0xffffff" borderAlpha="0.15">
<mx:List height="100%" dragEnabled="true" color="black">
<mx:Array>
<mx:String>○○</mx:String>
<mx:String>△△</mx:String>
<mx:String>▲▲</mx:String>
<mx:String>□□</mx:String>
</mx:Array>
</mx:List>
</mx:Panel>

<mx:Panel id="fruitDetails" title="drag fruit here" color="0xffffff" borderAlpha="0.15" width="100%" height="100%"
paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10">
<mx:dragEnter>
if (event.dragSource.hasFormat('items'))
{
var dropTarget:Panel = event.currentTarget as Panel;
DragManager.acceptDragDrop(dropTarget);
}
</mx:dragEnter>
<mx:dragDrop>
var myCB:ControlBar=new ControlBar();
var myLabel:Label=new Label();
var myNS:TextInput=new TextInput();
var mySpacer:Spacer=new Spacer();
var myButton:Button=new Button();

myLabel.text="■■";


mySpacer.percentWidth=100;
myButton.label="Add to Cart";
myButton.addEventListener('click', addToCart);

// myCB.percentWidth=100;
myCB.addChild(myLabel);
myCB.addChild(myNS);
myCB.addChild(mySpacer);
myCB.addChild(myButton);

var data:Object = event.dragSource.dataForFormat('items');
var p:Panel = new Panel();
p.title = new String(data);
p.percentWidth = 100;
p.percentHeight = 25;
p.setStyle("color","black");


p.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
p.addEventListener(MouseEvent.MOUSE_MOVE,dragEnterHandler);
p.addEventListener(MouseEvent.MOUSE_UP,dragDropHandler);

p.addChildAt(myCB, p.numChildren);

fruitDetails.addChild(p);
</mx:dragDrop>
</mx:Panel>

</mx:Application>
ram
投稿日時: 2009-8-11 9:49
やや お馴染みさん
登録日: 2009-8-10
居住地:
投稿: 5
Re: ドラッグ&ドロップ(treeからpanel)
連投で申し訳ありません。treeの部分を記述しておりませんでしたので自己レスです。
list( 昨日の投稿で抜粋したものと同じ)を、下記のようなtree(◆砲吠儿垢靴燭い塙佑┐討ります。


----------------------------
<mx:List height="100%" dragEnabled="true" color="black">
<mx:Array>
<mx:String>○○</mx:String>
<mx:String>△△</mx:String>
<mx:String>▲▲</mx:String>
<mx:String>□□</mx:String>
</mx:Array>
</mx:List>
----------------------------



----------------------------
<mx:XMLList id="treeDP">
<node label="○○"/>
<node label="△△"/>
<node label="▲▲"/>
<node label="□□">
<node label="しかく1"/>
<node label="しかく2"/>
<node label="しかく3"/>
<node label="しかく4">
<node label="しかくしかく1"/>
<node label="しかくしかく2"/>
</node>
</node>
<node label="■■">
<node label="くろどうふ1"/>
<node label="くろどうふ2"/>
</node>
</mx:XMLList>
<mx:VBox height="100%">
<mx:Panel title="" borderColor="black" borderAlpha="1"backgroundColor="#E5E7E9" height="637">

<mx:Tree id="firstList"
showRoot="true"
labelField="@label"
dragEnabled="true"
dropEnabled="true"
allowMultipleSelection="true"
creationComplete="initApp();" width="210" height="572"
/>
</mx:Panel>
----------------------------
fujita
投稿日時: 2009-8-11 10:01
ご主人様
登録日: 2006-7-11
居住地: 日本一暑いところの近く。
投稿: 128
Re: ドラッグ&ドロップ(treeからpanel)
こんにちは。

>○そもそも、実装が可能なのか
可能です。
ソースを読んだだけなので動作自体は確認してないのですが、
ListをTreeにしても、ドラッグ自体は出来ていますよね?
なので、問題点はドラッグを許可するための処理にあると思います。
PanelのdragEnterの処理で、

if (event.dragSource.hasFormat('items'))

としていますが、Treeの時は選択したアイテムをdragSourceに追加する際、
"treeItems"になりますので、

if (event.dragSource.hasFormat('treeItems'))

に変更する必要があります。
同様に、dragDrop処理の

var data:Object = event.dragSource.dataForFormat('items');



var data:Object = event.dragSource.dataForFormat('treeItems');

に変更すれば動くかと思います。

で、こちらは余談ですが、

p.addEventListener(MouseEvent.MOUSE_MOVE,dragEnterHandler);
p.addEventListener(MouseEvent.MOUSE_UP,dragDropHandler);

ドラッグのイベントハンドラであるdragEnterHandlerとdragDropHandlerが、
マウス操作のイベントと関連づけてありますけれど、
こちらは

p.addEventListener(DragEvent.DRAG_ENTER,dragEnterHandler);
p.addEventListener(DragEvent.DRAG_DROP,dragDropHandler);

にしないとエラー出ませんか?
特に、MouseEvent.MOUSE_UPイベントは、ドラッグ中である事を保証しないため、
ドラッグしていない状態でpのパネル上でクリックをするとランタイムエラーが必ず発生するかと思います。
イベントとハンドラは適切な値を考慮しないと、自分の予期しないところでエラーが発生しますので注意してみてください。
ram
投稿日時: 2009-8-11 13:43
やや お馴染みさん
登録日: 2009-8-10
居住地:
投稿: 5
Re: ドラッグ&ドロップ(treeからpanel)
fujita様,


お忙しい中、ご丁寧な回答ありがとうございます。
無事、ドロップ、ランタイムエラーとも解決致しました。

もしお時間あれば、もう一点お教え頂きたいのですがよろしいでしょうか。

左panel内をtreeに変更後、右panelへドロップを行うと、
listからの際には表示されていた、newされたpanelのタイトル(「○○」等)が表示されなくなってしまいます。
表示されるようにするには、どのような修正が必要でしょうか?
タグnodeの属性labelで定義している(2回目の投稿の◆砲里澆覆里如
下記部分がうまくいっていないと考えているのですが・・・。

------------------------
var data:Object = event.dragSource.dataForFormat('treeItems');
(中略)
p.title = new String(data);
------------------------
fujita
投稿日時: 2009-8-11 16:54
ご主人様
登録日: 2006-7-11
居住地: 日本一暑いところの近く。
投稿: 128
Re: ドラッグ&ドロップ(treeからpanel)
>下記部分がうまくいっていないと考えているのですが・・・。
Exactly!(その通りでございます。)

こちらはdataの中身がポイントですね。
dataが,任String型なので、

new String(data);

でそのまま文字列になっているのですが、
△任XML型になっています。
やりたい事というのは、nodeタグのlabel属性値を取得したいわけなので、

p.title = new String(data.@label); // nodeタグのlabel属性値を取得。"@○○"で属性値にアクセス出来ます。

とすればOKです。
ram
投稿日時: 2009-8-11 18:11
やや お馴染みさん
登録日: 2009-8-10
居住地:
投稿: 5
Re: ドラッグ&ドロップ(treeからpanel)
fujita様,

ありがとうございます。
早速試したのですが、ドロップ時に以下のランタイムエラーが発生してしまいます。
「ReferenceError: Error #1081: Array にプロパティ @label が見つからず、デフォルト値もありません。」

デバッグしてactionscriptも見たのですが、ちょっと手が出ません・・・。
いろいろと伺って申し訳ありません。もう少しお付き合い頂けますでしょうか。
fujita
投稿日時: 2009-8-11 18:46
ご主人様
登録日: 2006-7-11
居住地: 日本一暑いところの近く。
投稿: 128
Re: ドラッグ&ドロップ(treeからpanel)
すみません、私も勘違いしてたようです。

>ReferenceError: Error #1081: Array にプロパティ @label が見つからず、デフォルト値もありません。
変数dataはこの段階で、Array型、って事ですね。
直近としてはまず以下の対応で良いかと思います。
複数の行選択を許可するとなるとまた変更が必要ですが。


p.title = new String(data[0].@label);


今回みたいに、
"○○にプロパティ△△が見つからず、デフォルト値もありません。"
というエラーは多分、今後の開発でよく発生すると思いますが、
その場合の手がかりは、△△がどこで使用されているかを見ると良いですよ。

今回は
"String(data.@label)"としているところで@labelが出てきますので、
エラーメッセージ"△△が見つからず、デフォルト値もありません。"から、
その手前のdataには"@label"でアクセス出来る値が存在しない、というのが解ります。
で、その事から、
1.dataには@labelが存在しない
2.エラーメッセージから"Array"には@labelが存在しない
⇒Arrayというのはdataの型を指している、というのが読み取れるかと思います。

treeItems=選択した複数の行情報
(複数行選択していなくても、Itemsと変数名が複数形なので、
配列となるのが読める)
となるので、選択した各行の値は配列要素に格納されている、というわけです。
なので、今回は、配列要素となるdataの1行目の要素が選択した行のXMLなので、
そのXMLに対して@label属性値を取る、と変更する事で対処します。

自信満々に答えておいてこんなありさまで申し訳ないです。
ram
投稿日時: 2009-8-11 23:37
やや お馴染みさん
登録日: 2009-8-10
居住地:
投稿: 5
Re: ドラッグ&ドロップ(treeからpanel)
fujita様,


的確なアドヴァイス、本当にありがとうございます。
なんとか目処がたちました。

再度本フォーラムでお世話になることがあるかもしれませんが、その際もどうぞ宜しくお願い致します。
ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を