jQuery iframeFix on a Sortable

Question

On my CMS I have a list of thumbnails (Sortable). The thumbnails work great and now I'm writing a plug-in to drag-them to a tinyMCE window.

As the tinyMCE window has an iFrame it doesn't work that well.

jQuery has an option for Draggables called iframeFix that works exactly as I need. However that list must be a Sortables. I've looked quite extensively on Google and found no-one with my requirements. Has anyone here on StackOverflow done it?

Apply the iframeFix to a Sortables?

If not... I'm on my way to a jQuery plug-in.

Thank you in advance!

Answer 1

I've done it.

You need to have a DIV on top of the iFrame to let the Draggable/Sortable flow without problems. So I used jQuery to create a DIV right on top of the iframe. Then it show's it when you grab the element and destroys it when you drop it. Works like a charm. If anyone is in need of something like that let me know.

update (by popular request):

On my specific scenario I use the following DIV:

<div id="iframeDivFixer" class="ui-draggable-iframeFix" style="background-color: rgb(255, 255, 255); display: none; width: 665px; height: 665px; position: absolute; opacity: 0.001; z-index: 1000; left: 362px; top: 290px; background-position: initial initial; background-repeat: initial initial;"></div>

And, as soon as I grab the thumbnail javascript is used to set the display property to block. The process is reversed when you release the dragabble.

Answer 2

A seriously old question here, but there's another way to do it using css - pointer-events:none; which is supported on all the currently supported browsers (IE11 and above - caniuse.com)

$("#sortable").sortable({
    start: function() {
        $("iframe").css("pointer-events", "none");
    },
    stop: function() {
        $("iframe").css("pointer-events", "");
    },
});