使iframe内的元素可拖动并可调整大小

Question

我正在尝试在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图像

Answer 1

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

Answer 2

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

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