Drag and Drop [preventDefault issue]

[javeiga-iest]

I'm using DragMouseController and DropMouseController to implement drag and drop on my project.

That works fine, the problem occurs when I drop an item out of the destination container, the object just "disappears".

I have thought of putting a drop handler at the level of the main form and somehow "cancel" the drop.

There is a "preventDefault" function, but it raises exception when I call it. What am I doing wrong?

My code: DraggableItem.mxml

<?xml version="1.0" encoding="utf-8"?>
<j:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:j="library://ns.apache.org/royale/jewel"
    xmlns:js="library://ns.apache.org/royale/basic"
    xmlns="http://www.w3.org/1999/xhtml" xmlns:mx="library://ns.apache.org/royale/mx"
    xmlns:html="library://ns.apache.org/royale/html"
    mouseDown="onMouseDown(event)" >
    <fx:Script>
        <![CDATA[

            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;

                dispatchEvent(new Event("onDragging"));
            }

		]]>
    </fx:Script>
    <j:beads>
        <js:ContainerDataBinding/>
        <js:DragMouseController dragStart="onDragStart(event)"/>
    </j:beads>
    <j:HGroup itemsHorizontalAlign="itemsLeft" percentWidth="100" mouseDown="selectedHor()">
        <js:FontAwesomeIcon text="{FontAwesome5IconType.CLOCK}" faStyle="{'r'}" relativeSize="xs" style="margin-right: 8px;"/> 
        <j:Label localId="label" text="test" />
    </j:HGroup>
</j:HGroup>

preventDefault on my MainContent.mxml:

private function onDragEnd(event:DragEvent):void
{
    event.preventDefault();
}

<j:beads>
    <js:DropMouseController dragDrop="onDragEnd(event)"/>
</j:beads>