Make elements inside an iframe draggable and resizable

Question

I'm trying to make elements within an iframe draggable and resizable.

First the user can add elements such as images and divs which appends into an iframe (same domain). Therefore I have tried searching within iframe using

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

#iframeDiv being the iframe id

.draggable being the image class

I have also tried getElementId() to find the element within the iframe and then used

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

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

but neither one has worked.

Is there another function I could use to make it draggable/resizable?

UPDATE: With some help, I have solved the draggable issue. However, I still cannot resize any elements.

Here is a JSFiddle. A jpg image needs to be uploaded

There are a few issues with your jsFiddle. First of all, you need to load jquery UI for draggable and resizable to be available. Second, you need to call initDrag once the image has been added - not at iframe onload time. Here is a fixed up version http://jsfiddle.net/eRmD4/1/. However, it's still not working - the image is only dragged when you're moving your mouse outside of the iframe, but once mouse is over the iframe - it doesn't drag. A bit strange, I had similar issues in the past with how jquery UI handles drag/resize within iframes. — Karolis, Jan 26 '14 at 15:00
@Karolis Thanks for the fix. I don't understand why it drags when the mouse is outside the frame. I'm still working on the resize as well but that's not going so well. — , Jan 28 '14 at 13:05
I found the solution of the mouse over the iframe. I inserted iframeFix:true. — , Jan 28 '14 at 13:30

score 1 · Accepted Answer · answered Jan 29 '14 at 09:24

1

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

answered Jan 29 '14 at 09:24

newTag · Answer 2 · 2014-03-17T16:56:33.603

0

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

You could wrap the iframe inside a draggable/resizable div like the demo. See demo

edited Mar 17 '14 at 16:56

answered Feb 05 '14 at 12:19

newTag

2,149
1
22
31

Thanks, but I want the elements inside the iframe resizable and draggable. not the iframe itself. – Feb 05 '14 at 13:00

Make elements inside an iframe draggable and resizable

2 Answers2