使用 jQuery UI Draggable 拖动到 iFrame

Question

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

我已经使用 iframeFix 进行了测试，但要么我的浏览器（Chrome）不支持它，要么我做错了什么。

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

<div id="mycontainer" class="mycontainer">
    <iframe id="iframewindow" src="./child.html" frameborder="0" width="100%" height="100%"></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 Draggable。

Answer 1

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

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

超文本标记语言

<div id="mycontainer" class="mycontainer">
  <iframe id="iframewindow" src="" frameborder="0" width="100%" height="100%"></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根据需要返回 a，并且 2 个对象将相互了解。

请注意，您的 iframe 应该只是纯 HTML（不要在那里初始化可排序，否则会出现错误）