javascript - 从其 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>

当我开始拖动时，我希望能够通过单击 div 上的任意位置（包括 iframe）来拖动整个 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>