Having an issue with jQueryUI's Draggable and Resizable with iframes

Question

Okay, so I have a page here: http://8wayrun.com/streams/multi?type=1&pos1=1.8wayrun.video&pos2=1.8wayrun.chat

When you go to that page, you will see a video block, and a chat block. Both of these blocks are draggable and resizable.

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

The video block works fine, as its a simple object-embed. However, the chat block is giving me problems since the chat is an iframe. The iframeFix in draggable is for when the draggable element moves over an iframe, not for when the draggable element contains an iframe itself.

The issue I am having is that if you drag or resize the block, and you move your mouse too fast, and it goes over the iframe element, your mouse detaches from the drag/resize and makes it very hard to do either function. Is there a way to fix this?

Answer 1

Try overlaying a div over your iframe only when you are dragging. And when it you are done dragging destroy the overlay div.