Question

我有一个iframe元素，我想使其可调整大小和可拖动。我也希望用户能够通过在iframe中单击并拖动来拖动它。

这是一个jsfiddle： http://jsfiddle.net/t9DT8/9/

iframe元素被包装到容器div中。容器div可调整大小并可拖动。

问题在于，当在iframe上使用pointer-events: none时，它会很好地传递click事件，但是当它拖动它时，它会粘在游标上，并且点击事件不会再出现了。尝试在jsfiddle中拖动youtube视频进行演示。

问题：如何使iframe元素可拖动，以便您可以通过单击iframe元素内部来拖动它，并且一旦停止拖动它就会让你去？

HTML：

<div class="demo">
    <div id="resizable" class="ui-widget-content">
        <iframe width="100%" height="100%" src="//www.youtube.com/embed/9ZkWjkvaKpA" class="ui-widget-content" frameborder="no" id="test" allowfullscreen></iframe>
    </div>
</div>

JS：

$(function () {
    $("#resizable").resizable({
        helper: "ui-resizable-helper"
    });
    $("#resizable").draggable();
});

和CSS：

#resizable {
    width: 150px;
    padding: 15px;
    cursor: move;
    z-index: 1;
}
.ui-resizable-helper {
    border: 10px solid #efefef;
    margin: -10px;
}

#resizable iframe {
  pointer-events: none;
    z-index: 100;
}

更新：解决方案似乎在Firefox上运行正常，“胶合”问题只能在Chrome上重现：/

jQuery UI在带有指针事件的嵌套元素上可拖动：无

0 个答案: