将ifToSortable拖放到iframe中的可排序DIV中

Question

我试图将一个元素从主页面拖动到其中的iframe，并在框架内部使用可排序的div

我能够对div进行排序并将draggable连接到可排序的内部，但是元素被删除的位置计算错误并在错误的位置排序

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

Answer 1

仔细阅读this jQueryUI bug ticket。你会看到jQueryUI“......不支持跨窗口拖动”。 因此，正如错误故障单中所建议的那样，您可以修改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加载，请确保从父窗口创建“droppable”：

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

hoverClass选项不是必需的，但它真的可以帮助用户在悬停时突出显示可放置区域，这样如果事情没有完全排队，它仍然可用;-)，整个事情是一个黑客，所以对我来说刚刚接近就够了。