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

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

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

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

屏幕video ： http ： //screencast-o-matic.com/watch/coltDdhakq

观看video，您将看到问题在于行动。

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

该video已删除，因此我完全不了解您的问题。 但是正如我所看到的，你的.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 。 由于我有同样的问题，我可能会朝着这个方向前进。

编辑：有一个更高级的库。 看到这个答案： 将jQuery Draggable的偏移问题转换为基于iFrame的Sortable