CODEWITHSUNDEEP
jqueryiframedrag-and-dropjquery-ui-sortableoffset
tomas657
tomas657

Reputation: 5979

jQuery UI draggable + sortable in iframe - wrong vertical offset

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?

Upvotes: 9

Views: 1862

Answers (2)

Sandro
Sandro

Reputation: 1835

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

Upvotes: 0

Anton Chukanov
Anton Chukanov

Reputation: 655

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/

Upvotes: 3

Related Questions