jQuery UI 可拖动 + 可在 iframe 中排序 - 垂直偏移错误 [英] jQuery UI draggable + sortable in iframe - wrong vertical offset

问题描述

我正在解决这个问题，但我不知道该怎么办.

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

情况:我在页面顶部有可拖动的元素，在 iframe 中有一些可排序的持有者.当我尝试将元素拖动到 iframe 时，它​​工作正常.但是，当 iframe 向下滚动并开始拖动可拖动元素时，它会连接到 iframe 中的第一个可排序支架，而不是当前位于 iframe 可见部分顶部的可排序支架.

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 摆弄完整代码: https://jsfiddle.net/0d420qpj/

屏幕视频: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) { 

      }
    });

你能帮我解决这个问题吗?

推荐答案

视频被删除，所以我不完全理解你的问题.但正如我所见，您的 .drag 元素只是连接到容器顶部并滚动它.因此，如果您禁用可拖动和可排序的滚动或降低灵敏度，问题就会消失.

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).

更新

好的，我找到了解决您问题的方法.它不是那么漂亮，但是在禁用滚动时它可以工作.

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/

更新 2

为了使光标居中对齐，需要添加从顶部到 iframe 的高度.在我们的例子中是 60px

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/

这篇关于jQuery UI 可拖动 + 可在 iframe 中排序 - 垂直偏移错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！