Question

We are using Scriptaculous’ draggable feature to allow the dragging and dropping of elements. This all works fine except when dealing with flash movies. We are using Scriptaculous v1.9.0 and PrototypeJS v1.7. A sample is:

<div style="position:absolute; z-index:1; top:0px; left:0px; height:px; width:px;" id="wrapper_movie15">
    <object height="337" width="364" style="position: absolute; width: 364px; height: 337px; z-index: 1; top: -15px; left: 42px;" class="movieId_ie15 selectable selected" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="movie15">
        <param value="movie.swf" name="movie">
        <param value="transparent" name="wmode">
        <param value="always" name="allowScriptAccess">
        <!--[if !IE]>-->
        <object height="337" width="364" data="movie.swf" type="application/x-shockwave-flash">
        <!--<![endif]-->            
        <p>--- movie ---</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
    </object>
</div>
<script type="text/javascript">
    new Draggable('movie15',{
        handle:'wrapper_movie15'    
    });
</script>

Chrome v22 and IE9 work as expected, moving the movie around, however Firefox v16.0.1 doesn’t seem to do anything.

Any help would be appreciated. Thanks.

Answer 1

What’s wrong:

1. Handle should be inside of draggable element (in other words, move with that object). You are trying to move flash movie when handle is staying on the same place.

2. Both wrapper and object are absolutely positioned.

3. Clicks are going to flash object.

Possible solutions:

• http://jsfiddle.net/C25MJ/ – with 50px handle above flash movie

• http://jsfiddle.net/C25MJ/1/ – with overlay positioned over flash movie, overlay will hi-jack mouse clicks