|
This was originally posted as "Drag from Tree, drop to List?". --- Hi Paul, Could you check into some possible bugs for me? When I test this code the drag separator appears to jump around when dragging inside the tree. For example, drag the "Sent" folder up and down the Tree and watch the location of the drag separator. Also, there seems to be a couple of times that it does not drop into the correct location. For example, run the project and drag and drop the "Inbox" node below the "Sent" node. In my tests it is being placed below the "Trash" node. On a design side (feature request), I can see the need to be able to drop "into" a list row, such as when someone wants to drag and drop a file into a folder. Best Regards, Judah Frangipane PS I'm reattaching the code below: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="initApp();"> <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" height="200" width="200" showRoot="false" labelField="@label" dragEnabled="true" dropEnabled="true" allowMultipleSelection="true" creationComplete="initApp();"/> <mx:List id="playlist" width="200" height="200" x="36" y="217" dragEnter="listDragEnter(event);" dragDrop="listDragDrop(event);"> <mx:dataProvider> <mx:ArrayCollection></mx:ArrayCollection> </mx:dataProvider> </mx:List> <mx:Script> <![CDATA[ private function initApp():void { firstList.dataProvider = treeDP; } import mx.controls.treeclasses.TreeNode; import mx.events.DragEvent; import mx.managers.DragManager; public function listDragEnter(event:DragEvent): void { // Get a reference to the drop target var dropTarget:UIComponent=UIComponent(event.currentTarget); // Check that the format of the data is one that we want to accept if (event.dragSource.hasFormat('treeItems')) { // Signal that this data can be dropped onto the target DragManager.acceptDragDrop(dropTarget); // Set the operation to copy, and show feedback to user DragManager.showFeedback(DragManager.COPY); } } public function listDragDrop(event:DragEvent): void { // Get the dataprovider for the List (ArrayCollection in this case) var data:ArrayCollection = ArrayCollection(playlist.dataProvider); // Get a reference to the 'data' that is being dragged var itemData:Array = event.dragSource.dataForFormat('treeItems') as Array; // Loop through each dataitem that is being dragged for (var i:int = 0; i < itemData.length; i++) { // Get the node data var item:XML = itemData[i]; // Add the node data to the list's dataprovider in a form that // the list control will understand data.addItem({label:item.attribute("label"), data:item}); } } ]]> </mx:Script> </mx:Application> Paul Williams wrote: I think you
will need to write event
handlers to allow the list control to accept items from a tree control.
In
addition to the docs, there’s a sample chapter on the labs with some
good
drag-and-drop tutorials: http://labs.macromedia.com/wiki/index.php/Flex_Framework:tutorials:tfts_drag_drop See below
for a very simple example based
on your code (flex 2 beta 2). Paul <?xml
version="1.0"
encoding="utf-8"?> <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
layout="absolute" creationComplete="initApp();">
<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" height="200" width="200"
showRoot="false"
labelField="@label"
dragEnabled="true"
dropEnabled="true"
allowMultipleSelection="true"
creationComplete="initApp();"/>
<mx:List
id="playlist" width="200" height="200"
x="36" y="217" dragEnter="listDragEnter(event);"
dragDrop="listDragDrop(event);">
<mx:dataProvider>
<mx:ArrayCollection>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:List>
<mx:Script>
<![CDATA[
private
function initApp():void {
firstList.dataProvider
= treeDP;
}
import
mx.controls.treeclasses.TreeNode;
import
mx.events.DragEvent;
import
mx.managers.DragManager;
public
function listDragEnter(event:DragEvent): void {
//
Get a reference to the drop target
var
dropTarget:UIComponent=UIComponent(event.currentTarget);
//
Check that the format of the data is one that we want to accept
if
(event.dragSource.hasFormat('treeItems')) {
//
Signal that this data can be dropped onto the target
DragManager.acceptDragDrop(dropTarget);
//
Set the operation to copy, and show feedback to user
DragManager.showFeedback(DragManager.COPY);
}
}
public
function listDragDrop(event:DragEvent): void {
//
Get the dataprovider for the List (ArrayCollection in this case)
var
data:ArrayCollection
= ArrayCollection(playlist.dataProvider);
//
Get a reference to the 'data' that is being dragged
var
itemData:Array = event.dragSource.dataForFormat('treeItems') as Array;
//
Loop through each dataitem that is being dragged
for
(var i:int = 0; i < itemData.length; i++) {
//
Get the node data
var
item:XML = itemData[i];
//
Add the node data to the list's dataprovider in a form that
//
the list control will understand
data.addItem({label:item.attribute("label"),
data:item});
}
}
]]>
</mx:Script> </mx:Application> -- "Always bear in mind that your own resolution to succeed is more important than any one thing." "You can have anything you want - if you want it badly enough. You can be anything you want to be, do anything you set out to accomplish if you hold to that desire with singleness of purpose." - Abraham Lincoln -- Flexcoders Mailing List FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com YAHOO! GROUPS LINKS
|
