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](https://i.stack.imgur.com/piUYm.png)

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/>