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.

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