jQuery UI draggable + sortable in iframe - wrong vertical offset

Question

I am solving this problem and I do not know what to do.

Situation: 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.

js fiddle with complete code: https://jsfiddle.net/0d420qpj/

screen video : http://screencast-o-matic.com/watch/coltDdhakq

Watch video and you will see problem in action.

$(".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) { 

      }
    });

Can you please help me solve this situation?

Answer 1

The video was deleted, so mb I don't understand your problem completely. But as I see, your .drag-element just connects to top of container and scrolls it. So if you disable scrolling of draggable and sortable or decrease sensitivity, the issue will be gone.

.sortable({ 
    scroll: false
});
.draggable({ 
    scroll: false
});

https://jsfiddle.net/0d420qpj/4/

Or you can place you draggable element to another position (left or right from container).

Update

Ok, I found this way to resolve your issue. It's not so beautiful, but it works when scrolling is disabled.

$('#iframe').contents().on('scroll', function() {
  $(".drag").draggable("option", "cursorAt", { top: -1 * $('#iframe').contents().scrollTop() });
});

https://jsfiddle.net/dz0orkox/1/

Update 2

For center alignment of cursor need to add height from top to iframe. 60px in our case

$('#iframe').contents().on('scroll', function() {
    $(".drag").draggable("option", "cursorAt", { top: -1 * $('#iframe').contents().scrollTop() + 60 });
});

https://jsfiddle.net/dz0orkox/3/

Answer 2

There seems to be no way to find a working solution to that so maybe it's an option for you to use HTML 5 drag and drop instead. E.g. https://github.com/StackHive/DragDropInterface. As I have the same issue I will probably go into this direction.

Edit: There is a more advanced library. See this answer: Offset issues with jQuery Draggable into an iFrame based Sortable