jQuery UI 可拖动+可在 iframe 中排序 - 错误的垂直偏移

Question

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

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

js fiddle 完整代码: https://jsfiddle.net/0d420qpj/

屏幕视频:http://screencast-o-matic.com/watch/coltDdhakq

观看视频，您将看到实际存在的问题。

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

      }
    });

您能帮我解决这个问题吗？

Answer 1

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

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

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

或者您可以将可拖动元素放置到另一个位置(容器的左侧或右侧)。

更新

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

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

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

更新2

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

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

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