Search code examples
jquery-uijquery-pluginsjquery-ui-sortabledraggable

jQuery iframeFix on a Sortable


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!


Solution

  • 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.