ansaurus

Question

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

Answer 1

A:

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

Cetra 2008-09-17 12:23:46

Answer 2

+1 A:

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 ?

Seldaek 2008-09-17 12:30:52

So I guess the answer is: it may be possible but there is no known API or other facility to do it in a standard way

BoD 2008-09-17 15:42:55

Answer 3

A:

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?)

Kristian J. 2008-09-17 12:32:19

Answer 4

+1 A:

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.

2008-09-17 13:10:51

Answer 5

+2 A:

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;
import flash.net.URLLoader;
import flash.net.URLRequest;

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;
  addChild(container);

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

  container.addChild(loader);
}

Here's the HTML/jQuery code

<html>
<head>
  <title>XHTML 1.0 Transitional Template</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    $(function() {
      $("#dragIcon").draggable();

      $("#flash").droppable({ 
        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
          ui.draggable.remove();
        }
      });
    });
  </script>
</head>
<body>

  <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"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"&gt;
      <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"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
      </embed>
    </object>
  </div>

</body>
</html>

jessegavin 2008-09-17 15:50:37

Answer 6

+8 A:

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.

enobrev 2008-09-17 17:19:27

Thanks a lot, I guess that proves wrong the other answers saying it's not possible!

BoD 2008-09-18 08:12:08

Way to go enobrev! That is really slick.

jessegavin 2008-09-18 14:40:03

Thank you sir. It's a bit buggy, but a proof of concept no less.

enobrev 2008-09-18 21:51:48

That is really, really, really smart! Thanks.

defmeta 2008-09-29 15:19:15

ansaurus

tags:

views:

answers:

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

related questions