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

该视频已删除，因此我完全不了解您的问题。但正如我所见，你的.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/

Answer 2

似乎没有办法找到一个可行的解决方案，所以也许你可以选择使用HTML 5拖放。例如。 https://github.com/StackHive/DragDropInterface。由于我有同样的问题，我可能会朝这个方向发展。

编辑：有一个更高级的库。请参阅此答案：Offset issues with jQuery Draggable into an iFrame based Sortable

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

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

2 个答案: