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

Wed Aug 2 07:38:57 PDT 2006

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>

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