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

【问题标题】：jQuery UI draggable + sortable in iframe - wrong vertical offsetjQuery UI 可拖动 + 可在 iframe 中排序 - 垂直偏移错误
【发布时间】：2015-12-27 16:59:32
【问题描述】：

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

情况：我在页面顶部有可拖动的元素，在 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) { 

      }
    });

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

【问题讨论】：

试试这个插件stereobit.github.io/dragend
这个插件是用来刷的，不是用来排序的……
这是一个错误。见bugs.jqueryui.com/ticket/15047 这个项目解决了droppables 的问题：github.com/maxazan/jquery-ui-droppable-iframe。但它不适用于可排序（github.com/maxazan/jquery-ui-droppable-iframe/issues/2），并且作者似乎没有维护这个项目。我认为一个解决方案可能是相似的，需要在sortable.refreshPositions(); 内修复 jQueryUi 中的某些内容

标签： jquery iframe drag-and-drop jquery-ui-sortable offset

【解决方案1】：

视频已被删除，所以我不完全理解您的问题。但正如我所见，您的 .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/

【讨论】：

我很高兴看到答案！问题如下：当开始将红色方块从 iframe 外部拖动到 iframe 中时，它会垂直跳离鼠标指针，从而产生偏移。特别是当 iframe 滚动时。当鼠标指针靠近边缘时，删除滚动选项似乎无法解决问题。
感谢您更新您的答案。但是当我将正方形向下拖动到矩形时，正方形仍然没有“附加”到鼠标指针上，对吧？
是的，没有附加。需要将 iframe 的顶部值添加到光标顶部值。在这种情况下〜60px。更新
是的，在 iframe 上看起来不错。你也可以在 iframe 上方进行这项工作（在 iframe 上方移动之前）吗？
我认为在某些时候需要覆盖 jQueryui 功能。

【解决方案2】：

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

编辑：有一个更高级的库。看到这个答案：Offset issues with jQuery Draggable into an iFrame based Sortable

【讨论】：