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

Question

我正在解决这个问题,我不知道该怎么做.

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

js完整代码: 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

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

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