jQueryUI 的 Draggable 和 Resizable with iframe 存在问题

Posted

技术标签:

【中文标题】jQueryUI 的 Draggable 和 Resizable with iframe 存在问题【英文标题】:Having an issue with jQueryUI's Draggable and Resizable with iframes 【发布时间】:2013-04-18 20:20:51 【问题描述】:

好的,我在这里有一个页面: http://8wayrun.com/streams/multi?type=1&pos1=1.8wayrun.video&pos2=1.8wayrun.chat

当您转到该页面时,您会看到一个视频块和一个聊天块。这两个块都是可拖动和调整大小的。

$('#position_'+position).resizable().draggable(
    handle: '.info',
    iframeFix: true,
    opacity: 0.50,
    snap: true,
    snapTolerance: 10,
    stack:  group: '.multiBlank', min: 1 ,
    zIndex: 10000
);

视频块工作正常,因为它是一个简单的对象嵌入。但是,聊天块给我带来了问题,因为聊天是 iframe。 draggable 中的 iframeFix 适用于可拖动元素在 iframe 上移动时,而不适用于可拖动元素本身包含 iframe 时。

我遇到的问题是,如果您拖动或调整块的大小,并且您将鼠标移动得太快,并且它越过 iframe 元素,您的鼠标就会从拖动/调整大小中分离出来,并且很难做到功能。有没有办法解决这个问题?

【问题讨论】:

【参考方案1】:

尝试仅在拖动时将 div 覆盖在 iframe 上。当你完成拖动时,销毁覆盖 div。

【讨论】:

你也可以尝试这样的事情:jsfiddle.net/wncCV/3 这里我在重新调整大小时将 iframe 从 DOM 中移除,然后在调整大小后将其恢复。 谢谢...添加一个 div 并在启动和停止工作时销毁它。

以上是关于jQueryUI 的 Draggable 和 Resizable with iframe 存在问题的主要内容,如果未能解决你的问题,请参考以下文章

JQueryUI-拖动(Draggable)-在DOM 元素中约束运动

可调整大小的 tinyMCE 实例不适用于 jqueryUI 的 .draggable

JQueryUI-拖动(Draggable)-约束运动

jQuery/jQueryUI Droppable 采用 Draggable 的形式

jQueryUI Draggable Helper 选项帮助

jQuery UI 的 Draggable 和页面滚动