Is it possible to drag and drop from/to outside a Flash applet with JavaScript?

Let's say I want a web page that contains a Flash applet and I'd like to drag and drop some objects from or to the rest of the web page, is this at all possible?

Bonus if you know a website somewhere that does that!



This one intrigued me. I know jessegavin posted some code while I went to figure this out, but this one is tested. I have a super-simple working example that lets you drag to and from flash. It's pretty messy as I threw it together during my lunch break.

Here's the demo

And the source

The base class is taken directly from the External Interface LiveDocs. I added MyButton so the button could have some text. The majority of the javascript comes from the same LiveDocs example.

I compiled this using mxmlc.


DISCLAIMER I haven't tested this code at all, but the idea should work. Also, this only handles the dragging to a flash movie.

Here's some Actionscript 3.0 code which makes use of the ExternalInterface class.

import flash.display.Sprite;
import flash.external.ExternalInterface;

if (ExternalInterface.available) {
  ExternalInterface.addCallback("handleDroppedImage", myDroppedImageHandler);

private function myDroppedImageHandler(url:String, x:Number, y:Number):void {

  var container:Sprite = new Sprite();
  container.x = x;
  container.y = y;

  var loader:Loader = new Loader();
  var request:URLRequest = new URLRequest(url);


Here's the HTML/jQuery code

  <title>XHTML 1.0 Transitional Template</title>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript" src=""></script>
  <script type="text/javascript">
    $(function() {

        tolerance : "intersect",
        drop: function(e,ui) {

          // Get the X,Y coords relative to to the flash movie
          var x = $(this).offset().left - ui.draggable.offset().left;
          var y = $(this).offset().top - ui.draggable.offset().top;

          // Get the url of the dragged image
          var url = ui.draggable.attr("src");

          // Get access to the swf
          var swf = ($.browser.msie) ? document["MyFlashMovie"] : window["MyFlashMovie"];

          // Call the ExternalInterface function
          swf.handleDroppedImage(url, x, y);

           // remove the swf from the javascript DOM

  <img id="dragIcon" width="16" height="16" alt="drag me" />

  <div id="flash">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      id="MyFlashMovie" width="500" height="375"
      <param name="movie" value="MyFlashMovie.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#869ca7" />
      <param name="allowScriptAccess" value="sameDomain" />
      <embed src="MyFlashMovie.swf" quality="high" bgcolor="#869ca7"
        width="500" height="375" name="MyFlashMovie" align="middle"
        play="true" loop="false" quality="high" allowScriptAccess="sameDomain"


I would say it is possible to drop to Flash if you detect that the item is dragged on to the that contains the flash stuff, and you set your dragged objects to have a z-index higher than the flash. Then when it is dropped you can talk to Flash using javascript to tell it where and what was dropped.

However the other way around is probably much harder, because you'd have to detect when the object hits the border of the flash movie and "pass" it to the javascript handler (create it in the html, hide it in flash).

The question is probably to know whether it's worth the trouble, or if you can maybe achieve everything in JS or in Flash ?


Hang on, the encapsulation point is a valid one but flash can execute JS functions, and Seldaek is right that an HTML element with a higher z-index should float on the flash movie. So if you did all the drag handling in JS and had the flash read its own dimensions and the position of the pointer in the app it could signal JS methods that slave element(s) to the pointer even (especially) when the pointer leaves the boundaries of the flash app. It would be pretty hairy though.


If the whole site is one big embedded flash file then yes it's possible.

I don't think that you can acheive it any other way


Not possible in flash - unless you want to drag to a target inside the same flash application.

Could probably be done with a signed Java applet (but who wants to go down that road?)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.