将 connectToSortable 拖放到 iframe 内的可排序 DIV 中答案

【问题标题】：drag and connectToSortable into sortable DIV inside the iframe将 connectToSortable 拖放到 iframe 内的可排序 DIV 中
【发布时间】：2014-01-05 13:42:37
【问题描述】：

我试图将一个元素从主页面拖到其中的 iframe 中，框架内有可排序的 div

我能够使 div 可排序并将可拖动的连接到其中的可排序但元素被放置的位置计算错误并在错误的位置排序

可能是因为iframe内的鼠标坐标与主页面的位置不同

【问题讨论】：

您找到解决方案了吗？例子？

标签： jquery jquery-ui iframe jquery-ui-sortable

【解决方案1】：

仔细阅读this jQueryUI bug ticket。您会看到 jQueryUI “...不支持跨窗口拖动”。
话虽如此，正如 bug 票中所建议的那样，您可以修改 jQueryUI 中的内部代码来完成大部分您想要的操作。我按照建议进行了实施，只要 iFrame 中没有滚动，它就可以正常工作。一旦 iFrame 滚动，所有的赌注都关闭了，我怀疑这是 jQueryUI 不支持此功能的原因 ;-)。

1)。在（未缩小的）jquery-ui.js 文件的第 2964 行附近，直接在读取 m[i].offset = m[i].element.offset(); 的行之后添加代码：

  // handle iframe scrolling
  m[i].offset.top -=  m[i].element.parents().find("html,body").scrollTop();
  m[i].offset.left -=  m[i].element.parents().find("html,body").scrollLeft();

  // iframe positioning 
  if( this.current.options.iframeOffset )
  {
    m[i].offset.top +=  this.current.options.iframeOffset.top;
    m[i].offset.left +=  this.current.options.iframeOffset.left;
  }

2)。在调用 .draggable() 时，添加选项：

draggable.({
  iframeFix: true, 
  iframeOffset: $("#yourIframeID").offset()
 });

3)。确保在 iFrame 加载后从父窗口创建“可放置”：

$("#yourIframeID").load(function () {
      $(this).contents().find('<yourDroppableItemSelector>').droppable({
                                hoverClass: "landingHover",
                                iframeFix: true,
                                drop: function (event, ui) {
                                    $(this).css("background-color", "lightsalmon");
                                }
                            });
                        });

hoverClass 选项不是必需的，但它确实可以帮助用户在悬停时突出显示可放置区域，这样如果事情没有完全对齐，它仍然可以使用;-)，整个事情都是一个 hack，所以对我来说，靠近就足够了。

【讨论】：