使用 jQuery UI Draggable 拖动到 iFrame

Posted

技术标签:

【中文标题】使用 jQuery UI Draggable 拖动到 iFrame【英文标题】:Drag to iFrame using jQuery UI Draggable 【发布时间】:2017-05-01 14:11:41 【问题描述】:

我现在已经测试了很多东西,我知道这不是最佳选择,但是我需要从主页拖放到 iframe。两者都在同一个域中。

我已经使用 iframeFix 进行了测试,但我的浏览器 (Chrome) 不支持它,或者我做错了什么。

http://api.jqueryui.com/draggable/#option-iframeFix

<div id="mycontainer" class="mycontainer">
    <iframe id="iframewindow" src="./child.html" frameborder="0"  ></iframe>
</div>

在 iframe 中:

<div id="sortable">
  <div class="portlet">
     some content
  </div>
</div>

(我在 iframe 中使用 jQuery UI 进行排序。)

主页面内可拖动的加载脚本:

$(function() 

   $( ".draggable" ).draggable(
      connectToSortable: "#sortable",
      helper: "clone",
      iframeFix: true,
      helper: function(event) 
            return "<div class='custom-helper'>I move this</div>";

      ,
      revert: "invalid",
    );
   $().disableSelection();
);

我已经测试过制作覆盖等,但不知何故我没有让它工作。

这是一种从 html 页面拖放到 iframe 的方法吗? (在所有浏览器中?)

如果另一个解决方案运行良好,我不需要可拖动的 jQuery UI。

【问题讨论】:

确认一下,您正在尝试将一个元素从一个页面拖到一个可排序的 iFrame 内的页面上? 是的。我的可拖动项目(元素)列表位于主 HTML 中,我将它们拖到 iframe 内的可排序项中。 不幸的是,我无法为这种情况制作一个 jsfiddle,否则我会这样做。 开始拉小提琴:jsfiddle.net/Twisty/gkxe8vpy 【参考方案1】:

我找到了这个答案并能够应用它:jQuery-ui droppable to sortable inside iframe

这是我的小提琴:https://jsfiddle.net/Twisty/gkxe8vpy/4/

HTML

<div id="mycontainer" class="mycontainer">
  <iframe id="iframewindow" src="" frameborder="0"  ></iframe>
</div>

<div id="draggable" class="ui-state-highlight">Drag Me</div>

JavaScript

/**
 * Code to populate iFrame, mimics actual SRC
 */
var frameHTML = "<div id='sortable'><div class='portlet'>some content</div></div>";

var $iframe = $("#iframewindow");
$iframe.ready(function() 
  $iframe.contents().find("body").html(frameHTML);
);
/**
 * End of iFrame code
 */
$(function() 
  $("#draggable").draggable(
    connectToSortable: $iframe.contents().find("#sortable").sortable(
      items: "> div",
      revert: true,
    ),
    helper: "clone",
    iframeFix: true,
    helper: function(event) 
      return "<div class='custom-helper'>I move this</div>";
    ,
    revert: "invalid"
  );
  $iframe.contents().find("#sortable").disableSelection();
);

这里的“技巧”是将可排序对象创建为connectToSortable 选项的目标。这将根据需要返回一个selector,并且 2 对象将相互了解。

请注意,您的 iframe 应该只是纯 HTML(不要在那里初始化可排序,否则会出现异常)

【讨论】:

我实际上仍然无法使用“真实”iframe。该示例运行良好,我玩过 jsfiddle。但是,当在我的本地计算机上使用真正的 iframe 尝试它时,它不起作用。 iframe 的这个问题在 jQuery 中可能过于敏感/易受攻击。可能只是测试更多:blog.stackhive.com/post/137799349684/…(与 jQuery 相比,接缝坚如磐石) @Preben 有很多影响因素,而 jQuery 可能就是其中之一。大多数人都在尝试防止 XSS,所以我会在所有常见的浏览器中进行强烈测试以确保解决方案有效。 是的,我正在调查这个。我可能会使用 hack 将可拖动对象添加到 iframe 本身中。这样我确信它会起作用。 :-) 谢谢! 我正在考虑,比如让父 div 可放置,并触发在子页面中创建可排序项目。

以上是关于使用 jQuery UI Draggable 拖动到 iFrame的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI 拖动(Draggable) - Handles和Cancel

01 Jquery UI Draggable 拖动插件

使用 jquery-ui draggable 对可拖动对象进行分组

如何以编程方式调用 jQuery UI Draggable 拖动开始?

使用 jQuery UI Draggable,使用滚动条时如何避免拖动?

jQuery UI 拖动(Draggable) - 还原位置