kiwijus kiwijus - 6 months ago 76
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 :

iframe.find('.sim-row').droppable({
iframeFix: true,
drop: function (event, ui) {
console.log("dropped");
}
});

$('#drag').draggable({
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 - http://jsfiddle.net/D26CQ/1/

iFrame - http://jsfiddle.net/cMfMq/

Answer

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].offset.top -= 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].offset.top += this.current.options.iframeOffset.top;
            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 };
Comments