使 iframe 中的元素可拖动和调整大小答案

【问题标题】：Make elements inside an iframe draggable and resizable使 iframe 中的元素可拖动和调整大小
【发布时间】：2014-01-26 14:31:30
【问题描述】：

我正在尝试使 iframe 中的元素可拖动和调整大小。

首先，用户可以添加附加到 iframe（相同域）中的图像和 div 等元素。因此，我尝试使用

在 iframe 中搜索

$("#iframeDiv").contents().find(".draggable").draggable();
$("#iframeDiv").contents().find(".draggable").resizable();

#iframeDiv 是 iframe id

.draggable 是图像类

我也尝试过 getElementId() 在 iframe 中查找元素，然后使用

$(function() {
    $( ".draggable" ).draggable();
  });

$(function() {
        $( ".draggable" ).resizable();
      });

但都没有工作。

我可以使用其他功能使其可拖动/调整大小吗？

更新：在一些帮助下，我解决了可拖动的问题。但是，我仍然无法调整任何元素的大小。

这是JSFiddle。需要上传一张jpg图片

【问题讨论】：

您的 jsFiddle 存在一些问题。首先，您需要加载 jquery UI 以使可拖动和可调整大小可用。其次，您需要在添加图像后调用 initDrag - 而不是在 iframe 加载时。这是一个固定版本jsfiddle.net/eRmD4/1。但是，它仍然无法正常工作 - 仅当您将鼠标移到 iframe 之外时才会拖动图像，但是一旦鼠标移到 iframe 上 - 它就不会拖动。有点奇怪，过去我在 jquery UI 如何处理 iframe 中的拖动/调整大小方面遇到过类似的问题。
@Karolis 感谢您的修复。我不明白为什么当鼠标在框架外时它会拖动。我还在努力调整大小，但进展并不顺利。
我找到了鼠标悬停在iframe上的解决方案。我插入了 iframeFix:true。
你应该回答这个问题并接受它;)

【解决方案1】：

$("#iframeDiv").contents().find(".draggable").draggable({
    iframeFix: true
});

【讨论】：

【解决方案2】：

        $(function () {
            $("#framewrap")
                .resizable()
                .draggable();           
        });

您可以像演示一样将 iframe 包装在可拖动/可调整大小的 div 中。 See demo

【讨论】：