Fun with Canvas and DragDrop

So we were working on a simple little drag and drop interface for a project and ran into a weird bug that wouldn’t allow us to accept a drop onto a canvas no matter what we tried. Fortunately I remember running into the same problem with Flex 2 a couple years ago, unfortunately I couldn’t remember what I did to resolve it. I just don’t use drag/drop very often and didn’t remember the details.

So what is the issue? Here is the sample app:



<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”horizontal” >

<mx:Script>

<![CDATA[

import mx.controls.Image

import mx.core.DragSource;

import mx.core.UIComponent

import mx.events.DragEvent

import mx.managers.DragManager

private function doDragEnter(event:DragEvent):void

{

DragManager.acceptDragDrop(UIComponent(event.target));

}

private function doDragDrop(event:DragEvent):void

{

var img:Image;

if (event.dragInitiator.parent == dropCanvas)

img = event.dragInitiator as Image;

else

{

img = new Image();

img.source = (event.dragInitiator as Image).source;

img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);

dropCanvas.addChild(img);

}

img.x = event.localX - (event.dragSource.dataForFormat("localX") as Number);

img.y = event.localY - (event.dragSource.dataForFormat("localY") as Number);

}

private function doDragStart(event:MouseEvent):void

{

var dragInitiator:Image = event.currentTarget as Image;

var dragSource:DragSource = new DragSource();

var dragProxy:Image = new Image();

dragProxy.source = dragInitiator.source;

dragProxy.width = dragInitiator.width;

dragProxy.height= dragInitiator.height;

dragSource.addData(event.localX, "localX");

dragSource.addData(event.localY, "localY");

DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

}

]]>

</mx:Script>

<mx:VBox>

<mx:Image source=”@Embed(’assets/Hawk.jpg’)” mouseDown=”doDragStart(event)” />

</mx:VBox>

<mx:Canvas id=”dropCanvas” width=”100%” height=”100%” borderColor=”#1C5CC7” dragEnter=”doDragEnter(event)” dragDrop=”doDragDrop(event)” borderStyle=”solid” cornerRadius=”20” borderThickness=”6“/>

</mx:Application>

Link to compiled SWF (with source view) *updated Sept 6 to working link*

Now try to drag the image from the left. You’ll notice that as it hits the border it switches to accept the drag, however once you get inside the border it no longer accepts the drag. This was absolutely frustrating to research. Finally we figured out that not setting the backgroundColor means it interprets it as 100% transparent. Therefore when you are dragging on the transparent canvas it is looking to the application for the drag accept. The solution? Just set the backgroundColor. Using backgroundColor=”#7E92FC” on the dropCanvas yields the results as expected.

Link to compiled working SWF *updated Sept 6 to working link*

It totally makes sense once you think about it, but if you don’t know why it is happening it is absolutely frustrating, just ask Anthony

Note, the transparency rule applies to all drag targets (as we discovered when we were trying different containers like HBox, VBox, etc.

---

Possibly related posts: (automatically generated)

• Creating a simple image gallery with the Flex using TileList control
• Image Componet to load swf, images and resize
• Zoom and Pan Image Display