Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 511
tomas657 Avatar asked Dec 27 '15 16:12

tomas657


1 Answers

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/

like image 79
Anton Chukanov Avatar answered Nov 07 '22 02:11

Anton Chukanov