Oh,Boy!, this first component seemed easy but forced me to dig and finally it's working as expected ! After tried everything, I inspected the elements in browser and finally see what is happening. While dragging, the element is not "clicable", however after drop the state does not change and I need to reset that with a style change. For sure that's exists a better solution but it's working and I tested everything.
This is my final code for future reference - a drag and drop Card: Panel.mxml: <?xml version="1.0" encoding="utf-8"?> <j:Card xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:js="library://ns.apache.org/royale/basic" xmlns:html="library://ns.apache.org/royale/html" xmlns:j="library://ns.apache.org/royale/jewel"> <fx:Script> <![CDATA[ import org.apache.royale.html.beads.controllers.DragMouseController; import org.apache.royale.events.DragEvent; import org.apache.royale.html.beads.controllers.DragMouseController; private const DRAG_OFFSET:int = -20; private var localX:Number = 0; private var localY:Number = 0; private function onMouseDown(event:MouseEvent):void { localX = event.localX; localY = event.localY; } private function onDragStart(event:DragEvent):void { DragMouseController.dragImageOffsetX = (localX * -1) + DRAG_OFFSET; DragMouseController.dragImageOffsetY = (localY * -1) + DRAG_OFFSET; DragMouseController.dragImage = this; DragEvent.dragSource = this; } ]]> </fx:Script> <j:CardHeader mouseDown="onMouseDown(event)"> <j:beads> <js:DragMouseController dragStart="onDragStart(event)"/> </j:beads> <j:BarSection> <html:H3 text="Drag and Drop Demo"/> </j:BarSection> </j:CardHeader> </j:Card> App.mxml: <?xml version="1.0" encoding="UTF-8"?> <j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"; xmlns:html="library://ns.apache.org/royale/html" xmlns:j="library://ns.apache.org/royale/jewel" xmlns:js="library://ns.apache.org/royale/basic" xmlns:f="framework.*"> <fx:Style source="../../main/resources/styles.css"/> <fx:Script> <![CDATA[ import org.apache.royale.events.DragEvent; import org.apache.royale.mdl.Card; private function onDragEnd(event:DragEvent):void { var card:Card = DragEvent.dragSource as Card; mainArea.addElement(card); card.style = "pointer-events: auto"; } ]]> </fx:Script> <j:initialView> <j:View> <j:beads> <j:VerticalCenteredLayout/> <js:DropMouseController dragDrop="onDragEnd(event)"/> </j:beads> <js:Group id="mainArea" percentWidth="100" percentHeight="100"> <js:beads> <j:VerticalCenteredLayout/> </js:beads> <f:Panel width="200" height="200"/> </js:Group> </j:View> </j:initialView> </j:Application> Hugo Ferreira <[email protected]> escreveu no dia segunda, 29/06/2020 à(s) 01:25: > Here my mini project for recreate movable Flex Panel: > > https://drive.google.com/file/d/19qaHGIlK3Xj-ub3h66vl5SePLxlgnM9l/view?usp=sharing > > The only thing that I can't solve it's that after a drop, I can't start > dragging again. > I already tried all the options that I could find. > > Harbs <[email protected]> escreveu no dia domingo, 28/06/2020 à(s) > 19:52: > >> >> https://github.com/apache/royale-asjs/tree/develop/examples/royale/DragAndDropExample >> >> https://github.com/apache/royale-asjs/tree/develop/examples/royale/MultiDragDropExample >> >> > On Jun 28, 2020, at 9:27 PM, Hugo Ferreira <[email protected]> >> wrote: >> > >> > Hello, >> > >> > With Flex I can easy drag and drop a Flex Panel. >> > Just listen for mouse down and up and use the built in startDrag and >> > stopDrag functions: >> > >> > private function handleDown(event:MouseEvent):void >> > { >> > this.startDrag(); >> > } >> > >> > private function handleUp(event:MouseEvent):void >> > { >> > this.stopDrag(); >> > } >> > >> > How to do the same with Royale ? >> > >> > Thank you, >> > >> > Hugo. >> >>
