[SWFObject] [OT?] drag/drop <div id="flashcontent"></div>

Geoff Stearns geoff at deconcept.com
Wed Aug 2 07:53:51 PDT 2006


yeah the main thing to be aware of, is that if you change the  
position: css of any parent to a Flash element, firefox (i think)  
will redraw all the children of that element... which is a really  
crappy 'bug' (not sure if it's an official bug or not, but IE and  
Safari i think don't do it)

so when it reflows that stuff, it will reset your Flash movie (which  
is probably why the swfobject dissapears and comes back - it's  
reloading the whole thing - you could test this by looking at the sun  
animation - it starts at the bottom and then slowly rises up, so you  
can see if it's resetting entirely or just blinking out for a second.


On Aug 2, 2006, at 10:38 AM, DL wrote:

> On 1 Aug 2006 at 17:04, Geoff Stearns wrote:
>
> > i'm not sure you could do it with just the div with the flash  
> movie in it...
>
> That's about right .. unless there is a flash top layer in  
> SWFObject which is switched on during drag/drop to pickup mouse  
> events.
>
> Otherwise a draggable handle is required .. as example below.
>
> ...
>
> Experimented with a few drag and drop scripts ..
>
> http://www.walterzorn.com/dragdrop/dragdrop_e.htm
> http://www.brainjar.com/dhtml/drag/demo.html
> http://demo.script.aculo.us/ajax/sortable_elements
>
>
> Opted for wz_dragdrop.js (www.walterzorn.com) since it is easy to  
> add a few lines to the SWFObject wrapper page.  And it has a nice  
> API beyond drag and drop.
>
> But script.aculo.us looks good too.
>
> Here is an example of wz_dragdrop.js using the SWFObject  
> so_tester.swf, using some of the nested div ideas in above scripts.
>
> Only problem is that the SWFObject image disappears when being  
> dragged.
>
> Need to figure out how a snapshot image of SWFObject can be written  
> into div.
> Geoff's suggestion to move SWFObject div off screen might work.
>
> DL
> ______________________________________________________________.
>
>
> <html>
> <head>
> <title>Drag And Drop SWFObject</title>
>
> <!--
> possible scripts ..
> http://javascript.internet.com/page-details/drag-n-drop.html
> http://www.brainjar.com/dhtml/drag/demo.html
> http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop
> -->
>
> <!-- flash embed -->
> <script type="text/javascript" src="scripts/swfobject.js" ></script>
>
> <style type="text/css">
>
> .box {
>   left:100px;
>   top:100px;
>   background-color: #ffff00;
>   border: 1px solid #000000;
>   color: #000000;
>   padding: 0px;
>   opacity: 0.5;
>   position: absolute;
> }
>
> .bar {
>   width: 300px;
>   background-color: #008080;
>   color: #ffffff;
>   font-family: tahoma;
>   font-weight: bold;
>   font-size: 10;
> }
>
> .flashcontent {
>   width: 300px;
>   height: 300px:
>   background-color: #008080;
>   color: #ff0000;
> }
>
> </style>
> </head>
> <body>
> <!--
> using this script ..
> http://www.walterzorn.com/dragdrop/dragdrop_e.htm
> -->
> <script type="text/javascript" src="scripts/wz_dragdrop.js"></script>
>
> <div id="dragflash" class="box">
>   <div class="bar">drag SWFObject</div>
>   <div id="flashcontent" class="flashcontent"></div>
> </div>
>
> <script type="text/javascript">
> // <![CDATA[
> var so = new SWFObject("so_tester.swf", "sotester", "300", "300",  
> "8", "#FF6600");
> so.write("flashcontent");
> // ]]>
> </script>
>
> <script type="text/javascript">
> <!--
> SET_DHTML("dragflash"); // define draggable div id's as arguments  
> in SET_DHTML()
> //-->
> </script>
>
> </body>
> </html>
>
> _______________________________________________
> SWFObject mailing list
> SWFObject at lists.deconcept.com
> http://lists.deconcept.com/listinfo.cgi/swfobject-deconcept.com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.deconcept.com/pipermail/swfobject-deconcept.com/attachments/20060802/c8da7755/attachment-0005.htm>


More information about the Swfobject mailing list