拖动并connectToSortable到iframe中可排序的DIV中 [英] drag and connectToSortable into sortable DIV inside the iframe

问题描述

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

I was trying to drag a element from main page to a iframe inside it with sortable div inside frame

i能够使div可排序，并将draggable连接到其内部可排序，但是元素放置的位置计算错误并在错误的位置排序

i was able to make div sortable and connect draggable to sortable inside it but the position the element is dropped is computed wrong and sorted at wrong place

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

may be because the mouse coordinates inside iframe have different position with main page

推荐答案

仔细阅读此jQueryUI错误票证 .您会看到jQueryUI"...不支持跨窗口拖动".
可以这么说，正如错误凭单所建议的那样，您可以修改jQueryUI中的内部代码以完成大部分所需的工作.我按照建议实施，只要iFrame中没有任何滚动，它就可以很好地工作.一旦iFrame滚动，所有的赌注都关闭了，我怀疑这是jQueryUI不支持此功能的原因;-).

Carefully Read this jQueryUI bug ticket. You'll see that jQueryUI "... does not support cross-window dragging".
So that being said, as suggested in the bug ticket, you can modify the internal code in jQueryUI to do most of what you want. I implemented as suggested and it worked well as long as there was NO SCROLLING in the iFrame. Once the iFrame scrolled, all bets were off, which I suspect is the reason jQueryUI does not support this feature ;-).

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

1). Somewhere around line 2964 of the (not minified) jquery-ui.js file, directly following the line that reads m[i].offset = m[i].element.offset(); add the code:

  // 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()的调用中，添加以下选项:

2). In your call to .draggable(), add the options:

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

3).加载iFrame后，请确保您是从父窗口创建可放置"的

3). Make sure you are creating your "droppable" from the parent window, once the iFrame loads:

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

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

The hoverClass option is not necessary, but it really helps users to make the droppable area highlight on hover, that way if things arn't quite lining up, it is still usable ;-), the whole thing is a hack, so for me just getting close was good enough.

这篇关于拖动并connectToSortable到iframe中可排序的DIV中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！