创建可拖放的 iframe？答案

【问题标题】：Creating draggable and droppable iframes?创建可拖放的 iframe？
【发布时间】：2012-08-01 14:03:29
【问题描述】：

我们如何创建可拖放的 iframe？我有一个由 4 个 iframe 组成的面板。我想将一个 iframe 拖到另一个上，并且在放置操作时 iframe 应该交换位置。例如，将 iframe 1 拖到 iframe 2 上，应该会导致 iframe 2 显示在 iframe 1 先前占用的空间中。关于如何实现此功能的任何指针？我对如何将拖放事件与 iframe 相关联一无所知。

【问题讨论】：

难道不能将 iframe 容器元素（例如 <div>）设为可拖动目标吗？
这是我正在研究的东西。它看起来很复杂，但感谢您的提醒。 :)

标签： javascript jquery html iframe drag-and-drop

【解决方案1】：

如果可能，我建议使用div 元素而不是iframe。 iframe 通常包含单独的 HTML 页面，因此很难让它们以您正在寻找的方式进行交互。尝试检查 jQuery UI 的 droppable 操作。 http://jqueryui.com/demos/droppable/

【讨论】：

我曾经尝试在 div 中使用 object 元素来托管网页，但它给出了与 iframe 相同的问题，即网页上发生的事件不会传播到父 div，除非我覆盖对象元素上的透明 div。所以我决定放弃在 div 中托管网页的想法，并坚持使用 iframe。无论如何感谢您的评论！ :)
这并不总是可以在父文档中加载 iframe 内容。例如，如果您在 div 中有一个内联编辑器/代码编辑器，并且您放置了一个未关闭的样式标签。如果保存，整个应用程序将会崩溃。

【解决方案2】：

我找到了一个使用 iframe 和 jquery ui 进行简单拖放的解决方案。关于这篇文章

jquery ui How to get a id of a draggable item when i click on the droppable item

这有关系：

var itemId = $(ui.draggable).attr("id"); $(this).data('dropped', itemId);

我也稍微调整了一下。希望这可以帮助！享受

http://plnkr.co/edit/hB9xHZmCwDYfS3VxPWgt?p=preview

【讨论】：