kiwijus kiwijus - 2 years ago 249
jQuery Question

jquery droppable iframe offset

I am trying to use knockout to bind html to an iframe.

The main page contains a draggable and the iframe contains a droppable. The problem I am having is that the item is dropping in the wrong place, e.g.:

The green is where I would like the drop to occur however the red is where the drop actually occurs - it seems to be at the right coordinates but not taking into account the iframes position on the main page.
green - where I would like to drop, red - actual drop

I have tried applying the iframefix to both the draggable and droppable however it doesn't help :

iframeFix: true,
drop: function (event, ui) {

iframeFix: true,
helper: "clone"

It was wondering if there was someway of creating an 'offset' based on the iframes position and pass that through to the draggable so it can calculate its position?

Some fiddles :
Main Page -

iFrame -

Answer Source

The simplest solution I could find was to modify the jqueryUI draggable function to take into account the offset:

in the $.ui.ddmanager function add the following lines:

        m[i] -= m[i].element.parents().find("html,body").scrollTop();
        m[i].offset.left -= m[i].element.parents().find("html,body").scrollLeft();

        // iframe positioning 
        if (this.current.options.iframeOffset) {
            m[i] +=;
            m[i].offset.left += this.current.options.iframeOffset.left;

just before:

        m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight };
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download