I've explored many many options, but still cannot seem to get the item rendered in a list (the label) to be the drop target. It's always the damn list itself
I really stripped down code to bare bones and pasted it below for simplicity and clarity, but...no dice. Another set of eyes please? <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" initialize="init();"> <mx:Script> <![CDATA[ import mx.controls.Label; import mx.collections.ArrayCollection; import mx.events.DragEvent; import mx.managers.DragManager; import mx.core.DragSource; import mx.utils.ObjectUtil; [Bindable] private var presentationDefaultCollection:ArrayCollection; [Bindable] private var imagesAcademicCollection:ArrayCollection; private function init():void { this.imagesAcademicCollection = new ArrayCollection(); this.imagesAcademicCollection.addItem({source:"img/A01132009/highereducation 1-tn.jpg",title:"Image 1",segment:"Academic"}); this.imagesAcademicCollection.addItem({source:"img/A01132009/highereducation 2-tn.jpg",title:"Image 2",segment:"Academic"}); this.imagesAcademicCollection.addItem({source:"img/A01132009/highereducation 3-tn.jpg",title:"Image 3",segment:"Academic"}); this.imagesAcademicCollection.addItem({source:"img/A01132009/highereducation 4-tn.jpg",title:"Image 4",segment:"Academic"}); this.imagesAcademicCollection.addItem({source:"img/A01132009/highereducation 5-tn.jpg",title:"Image 5",segment:"Academic"}); this.presentationDefaultCollection = new ArrayCollection(); this.presentationDefaultCollection.addItem({source:"img/A01132009/highereduc ation1-tn.jpg",title:"Presentation 1"}); this.presentationDefaultCollection.addItem({source:"img/A01132009/highereduc ation2-tn.jpg",title:"Presentation 2"}); this.presentationDefaultCollection.addItem({source:"img/A01132009/highereduc ation3-tn.jpg",title:"Presentation 3"}); } private function dragEnterHandler(event:DragEvent):void { // Get the drop target component from the event object. var dropTarget:Label=event.currentTarget as Label; // Accept the drag only if the user is dragging data // identified by the 'value' format value. if (event.dragSource.hasFormat('value')) { // Accept the drop. DragManager.acceptDragDrop(dropTarget); trace('enter'); } } // Called if the target accepts the dragged object and the user // releases the mouse button while over the drop target. private function dragDropHandler(event:DragEvent):void { // Explicitly handle the dragDrop event. event.preventDefault(); // Get the data from the drag source. var value:String = event.dragSource.dataForFormat('value') as String; // Add Slide to the presentation sqlStuff(); } // Helper method for sql stuff private function sqlStuff():void { //the sql stuff trace('sql'); } ]]> </mx:Script> <mx:HBox> <mx:DataGrid id="presentationGrid" dataProvider="{this.presentationDefaultCollection}" width="200"> <mx:columns> <mx:DataGridColumn headerText="Presentations"> <mx:itemRenderer> <mx:Component> <mx:Label text="{data.title}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> <mx:DataGrid id="slideGrid" dataProvider="{this.imagesAcademicCollection}" dragEnabled="true" width="200"> <mx:columns> <mx:DataGridColumn headerText="Slide" dataField="title" draggable="true" /> <mx:DataGridColumn headerText="Segment" dataField="segment" draggable="true" /> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:WindowedApplication> _____ From: [email protected] [mailto:[email protected]] On Behalf Of Tracy Spratt Sent: Friday, January 30, 2009 4:15 PM To: [email protected] Subject: RE: [flexcoders] drag and drop ('into' the list items, while not adding to the list itself; Ex: iTunes) http://livedocs. <http://livedocs.adobe.com/flex/3/html/dragdrop_8.html> adobe.com/flex/3/html/dragdrop_8.html Now that only give you control over the drop functionality. You still need to extract the necessary key values form the source and target data, and build your update data structure and send it to the server, however you are doing that. Break this into steps. Make sure you can update the server with data from the source and target lists. Hard code the data as needed to test the Flex->server-->database->server->flex process. You can choosw whether you want the drag operation to update the client target list or whether you want to return the new list data from the server and re-populate the list with that. When you can update the database successfully, implement the dragDrop handler, extract the key/data values form the source and target, and pass them to the function you created and tested in the step above. Tracy Spratt Lariat Services Flex development bandwidth available _____ From: [email protected] [mailto:[email protected]] On Behalf Of David Kramer Sent: Friday, January 30, 2009 4:10 PM To: [email protected] Subject: RE: [flexcoders] drag and drop ('into' the list items, while not adding to the list itself; Ex: iTunes) Thanks for the super fast reply, Tracy. I will look of course, but for even more speed, do you have a link to reference? Thanks in advance. _____ From: [email protected] [mailto:[email protected]] On Behalf Of Tracy Spratt Sent: Friday, January 30, 2009 2:00 PM To: [email protected] Subject: RE: [flexcoders] drag and drop ('into' the list items, while not adding to the list itself; Ex: iTunes) If you write your own drag/drop handlers and call preventDefault, you can do anything you want, or nothing. There are lots of examples in the docs. Tracy Spratt Lariat Services Flex development bandwidth available _____ From: [email protected] [mailto:[email protected]] On Behalf Of David Kramer Sent: Friday, January 30, 2009 3:52 PM To: [email protected] Cc: [email protected] Subject: [flexcoders] drag and drop ('into' the list items, while not adding to the list itself; Ex: iTunes) Hello All. I've run into a problem, need other perspective(s)/solutions: Simply put: I want to implement drag and drop, like iTunes, in an AIR app. Seems easy, but...this particular scenario is puzzling. Right now, just like iTunes, I have two list-based controls (both are populated from collections of data within SQLite), one is a DataGrid and one is a List. Dragging and dropping from the Grid to the List is simple, yes, but I would like to drop on the list item's label/text/name in the List and perform another function (specifically an update to SQLite) and NOT simply drop the item and append to the list. Follow? As in iTunes, you can drag a song into a folder and it adds the song "into" the folder. (I would make that reference in SQLite in this case). It doesn't make a new folder by appending (wrongly) the dropped song to the folder list. (Which is what I have now: If I drag a item from the grid and drop it on the list, it's appended to the list, but I want it to become a value within the list item (pseudo nested) not a value in the list itself.) Is there a simple solution here I'm not seeing? Now, I can do all that neat stuff by dragging a grid item unto a mx:Button, but with only one button. Maybe I could "loop/repeater" to make a vertical stack of buttons from an array? But then it gets unclear as to how each button is created with the necessary dragEnter and dragDrop event handlers. any help here? This wheel has been invented before. So how in Flex? David (You can email me off of list if you'd like, I'll gladly post the solution at the end. kramer.david@ <mailto:[email protected]> consultant.com)
