title: jQuery UI draggable + sortable in iframe - wrong vertical offset
body: <p>I am solving this problem and I do not know what to do.</p>
  
  <p><strong>Situation:</strong> I have draggable elements at the top of page and some sortable holders in iframe. When I try to drag element to iframe, it is working fine. But, when iframe is scrolled down and I start dragging draggable element, it connects to first sortable holder in iframe, not to that sortable holder which is currently at top of visible part of iframe.</p>
  
  <p><strong>js fiddle with complete code:</strong> <a href="https://jsfiddle.net/0d420qpj/">https://jsfiddle.net/0d420qpj/</a></p>
  
  <p><strong>screen video</strong> : <a href="http://screencast-o-matic.com/watch/coltDdhakq">http://screencast-o-matic.com/watch/coltDdhakq</a></p>
  
  <p>Watch video and you will see problem in action.</p>
  
  <pre><code>$(".drag").draggable({ 
        helper : "clone",
        iframeFix: $('#iframe'),
        iframeOffset: $('#iframe').offset(),
        connectToSortable : f.find(".sort_holder"),
        distance : 10,
        cursorAt: { left: 20, top : 20},
        scroll : true,
        start: function(event, ui) { 
  
        },
        drag: function(event, ui) { 
  
        },
        stop: function(event, ui) { 
  
        }
      });
  </code></pre>
  
  <h3>Can you please help me solve this situation?</h3>