拖动从其 iframe 子项开始的父项

Question

我有这样的东西

<div draggable="true">
<iframe width="640" height="360" src="http://www.youtube.com/watch?v=dQw4w9WgXcQ?fs=1&amp;feature=oembed" frameborder="0" allowfullscreen="">
</iframe>
</div>

我希望能够在开始拖动时通过单击包括 iframe 在内的div 上的任意位置来拖动整个div。但是，iframe 不会级联事件。我还想保持与YouTube视频的交互可能（播放，全屏等）。

有没有人知道如何用html/css/js/jQuery做到这一点？

Answer 1

这里有一个你想要的近似例子......只需修复一点

#dra
{
    width:560px;
    height:315px;
    border:1px solid green;
    cursor:pointer;
}
#dra:hover iframe
{
    z-index:-1;position:absolute;
}

<div id="dra"><iframe  width="560" height="315" src="http://www.youtube.com/embed/T6s3d2wdXVg" frameborder="0" allowfullscreen></iframe></div> 
<script>
$( "#dra" ).draggable({stop: function() {
                $( "iframe" ).css('z-index','0');
            }});
</script>