draggable behaviour appearing broken under Safari

draggable behaviour appearing broken under Safari


Description: Contents of draggable content areas are sometimes not
clickable when viewing the page through Safari. Other browsers seem to
have no issues. Digging for a few hours found a complaint on a related
board at:
http://www.nabble.com/Embedded-Flash-Draggable-on-Safari-td19394706s27240.html
An example is provided below. If viewed in IE or Firefox you will be
able to drag the window around with the top handle, and start/stop/
control the video using the controls. With Safari the contents will
render, but won't be controllable at all.
Example Code of problem in action:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/
ui.draggable.js"></script>
<script>
$(document).ready(function(){
$("#draggable-handle-div").draggable({ handle: "div" });
$(".block").draggable();
});
</script>
<style>
#draggable-handle-div {
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 640px;
height: 360px;
margin: 10px;
}
</style>
</head>
<body>
<div id="draggable-handle-div" class="draggable"><div class="drag-
handle">aaaaaaaaaaaa</div>
<embed src="http://blip.tv/play/AdmMLQA" type="application/x-
shockwave-flash" width="600" height="338" allowscriptaccess="always"
allowfullscreen="true"></embed>
</div>
</body>
</html>