Re: Drag and Drop example

[Hugo Ferreira]

I did it !
Hours as a starter without a specific example but it works (more or less).

Drag and Drop of a Card (Panel in Flex world):

this is my demo 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;

private function onDragStart(event:DragEvent):void
{
DragEvent.dragSource = this;
DragMouseController.dragImage = this;
}
]]>
</fx:Script>

<j:CardHeader>
<j:beads>
<js:DragMouseController dragStart="onDragStart(event)"/>
</j:beads>

<j:BarSection>
<html:H3 text="Drag and Drop Demo"/>
</j:BarSection>
</j:CardHeader>
</j:Card>

And this my main 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[
private function onDragEnd(event:DragEvent):void
{
addElement(DragEvent.dragSource as Panel);
}
]]>
</fx:Script>

<j:initialView>
<j:View>
<j:beads>
<j:VerticalCenteredLayout/>
</j:beads>

<js:Group percentWidth="100"
percentHeight="100">
<js:beads>
<js:DropMouseController dragDrop="onDragEnd(event)"/>
</js:beads>
<f:Panel width="200"
height="200"/>
</js:Group>
</j:View>
</j:initialView>
</j:Application>

Probably you will find things that there is a better way to do it !

But there is only an issue.
I don't know if it's a bug in the Royale framework or if it's missing to
reset something:
After I drop the Panel (Card), I can't start dragging again.
Any ideas ?

Harbs <harbs.li...@gmail.com> 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 <hferreira...@gmail.com>
> 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.
>
>