Real World Flex/ColdFusion: Part 10

Today we are going to walk through a pretty cool feature of our application. I want to add drag and drop support from the grid to the tree. If I am in one folder I want to be able to copy/move multiple files to another folder.

The first step is to add drag support to the grid. We want to enable both the drag enabled and drag move enabled properties. <mx:DataGrid id="filelist" width="100%" height="100%" dataProvider="{files}" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:DataGridColumn headerText="File Name" dataField="name"/> <mx:DataGridColumn headerText="File Type" dataField="type"/> <mx:DataGridColumn headerText="File Size" dataField="size" labelFunction="bytesToKilobytes"/> <mx:DataGridColumn headerText="Last Modified" dataField="lastModified"/> <mx:DataGridColumn headerText="Hidden" dataField="isHidden"/> </mx:columns> </mx:DataGrid> Here is where it will get a bit trickier. To accomplish our end goal we are going to have to some custom D&D work. Your first thought would be to just set the tree drop enabled property to true and your good. While its a good thought there is no way around it, we going to have to manually add our custom drag & drop support. The drop target can use various events, the most important of which are the dragEnter, dragDrop, and dragExit events.

When a source is being dragged in to our tree component the enter event fires. The first thing we want to do is to accept the drag drop. You will notice in all of these methods we are using the preventDefault method of the event. This just means that you are canceling the expected operation and creating your won. In our drag over event we are getting the location of where the drop is because we need to know what folder the user wants to drop these files in. Then we are allowing for a move or copy. If the user holds down the ctrl key we are allowing them to copy the files over. This is the default behavior of win and should work just like the file explorer. I have to admit that I really don't know anything about a mac so any pointers here to make it compatible across platforms would be a big help. Finally we need to account for the drop. When the file or files are dropped on to our tree the drag drop event fires. First we check to see if the drag source has the required format of items. In our case we know the data grid will but I just wanted to point that out. Next we grab a list of the files that were dropped. It could one or it could be several because our data grid allows for multiple selection. The event passes an action and here its either going to be move or copy. Based on that action we can either call a move or copy method. // Drag & Drop events private function onTreeDragEnter(event:DragEvent):void { event.preventDefault(); DragManager.acceptDragDrop(UIComponent(event.currentTarget)); } private function onTreeDragOver(event:DragEvent):void { event.preventDefault(); var dropTarget:Tree = Tree(event.currentTarget); var r:int = dropTarget.calculateDropIndex(event); tree.selectedIndex = r; if (event.ctrlKey) { DragManager.showFeedback(DragManager.COPY); } else { DragManager.showFeedback(DragManager.MOVE); } } private function onTreeDragDrop(event:DragEvent):void { event.preventDefault(); var items:Array = new Array(); var action:String = event.action; if(event.dragSource.hasFormat("items")) { items = items.concat(event.dragSource.dataForFormat("items") as Array); } switch(action){ case "copy": copyFiles(items); break; case "move": moveFiles(items); break; } }

The last thing we need to do to get this to work is implement the copy/move methods. To do so we need update our file manager component with a move and copy method. <cffunction name="moveFile" access="remote" output="false" returntype="void"> <cfargument name="fromPath" type="string" required="true"/> <cfargument name="toPath" type="string" default="true"/> <cffile action="move" source="#arguments.fromPath#" destination="#arguments.toPath#"/> </cffunction> <cffunction name="copyFile" access="remote" output="false" returntype="void"> <cfargument name="fromPath" type="string" required="true"/> <cfargument name="toPath" type="string" default="true"/> <cffile action="copy" source="#arguments.fromPath#" destination="#arguments.toPath#"/> </cffunction> In our move and copy methods we are accepting the array of files that need to be moved or copied. We loop the array and one by one perform the desired action on the file. Last, we need a way to refresh the list of files for the selected directory. You will remember that when we dropped the file we selected the directory for this very reason. We know what directory is selected, so grab that path and make another call to getFiles to refresh the list. private function moveFiles(items:Array):void { for each(var item:Object in items) { // from path | to path FileManager.moveFile(item.path,tree.selectedItem.path); } // refresh the selected directory FileManager.getFiles(tree.selectedItem.path); } private function copyFiles(items:Array):void { for each(var item:Object in items) { // from path | to path FileManager.copyFile(item.path,tree.selectedItem.path); } // refresh the selected directory FileManager.getFiles(tree.selectedItem.path); }

I think we are finally getting down to the end of this series. I have saved the best for last and it could really warrant its own series so I am not quite sure how to handle it. We will tackle uploading files next and it happens to be something I am fairly familiar with as I have written about 10 different upload components.