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>