jquery draggable disabling click functionality on containing content

Question

I'm trying to place a flash video (object, swf) inside a div, and have that div draggable around the user's page. My code below works fine in everything except Chrome, where all the buttons in the player become un-clickable. (you can still hover over buttons for some reason and get feedback, like a mouseover in the flash player, but you can't click it)

This means that mute, pause, volume, fullscreen, etc are all broken in chrome. Clicking anywhere on the player just treats it like a drag click (any click anywhere on the player gives no feedback, but holding it and dragging will drag the div)

What I'm looking for is a click/draggable border around the div, with a functioning video player inside (like it works in IE and FF), that stays in its current position on the screen as the user scrolls up and down the page's contents.

I'm just running the following in my js:

$('#video').draggable();

and my relevant CSS is:

#video
{
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #0DD0FC;
    display: block;
    width: 640px;
    cursor: pointer;
    height: 360px;
}

and in my HTML I have

<div id="video" style="z-index: 4500;">
        <object width="100%" height="100%">
            <param name="movie" value="http://www.domain.com/value;autoplay=true" />
            <param name="allowscriptaccess" value="always" />
            <param name="allowfullscreen" value="true" />
            <param name="wmode" value="transparent" />
            <embed src="http://www.domain.com/value;autoplay=true" type="application/x-shockwave-flash"
                allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%"
                wmode="transparent"></embed></object> 
    </div>

Answer 1

您可以指定哪些孩子不应该激活可拖动对象 ，但恐怕我不能保证它如何与Flash内容一起使用。