Draggable JQuery UI scroll issue when using within iframe

问题

Jsfiddle is here: http://fiddle.jshell.net/Msd7v/29/

Here is my Javascript:

$('#app').contents().find('.dragOption').draggable({
   iframeFix:true,
   scroll: true
});

and then in the iFrame

#html
<div id='box'>
  <div class='dragOption'></div>
</div>

#css
#box {
  background: red;
  height: 600px;
  width: 100%;
  left:10;
  z-index: 10000;
  position: relative;
  top: 10;
}

.dragOption {
  height: 80px;
  width: 200px;
  position: absolute;
  z-index: 100001;
  outline: 1px solid #000;
  top: 400px;
}

When you try to move the draggable div when you are already scrolled down, the draggable library doesn't take into account the window height. Is there a way to offset this? or a monkey patch for the library so you can force it to recognize the correct scroll distance and not have the draggable div jump up to the top of the iframe above the fold?

来源：https://stackoverflow.com/questions/21010675/draggable-jquery-ui-scroll-issue-when-using-within-iframe