7

What a mouthful.

Basically I have a parent <div> and inside that an <iframe>. I need an element inside the iframe to be the handle to drag the parent div. Is this even possible?

I have tried:

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle'));
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

It is targeting the right DOM element but it just won't drag. It might be possible to overlay a hidden div ontop of the iframe but I have found the iframe takes the event over the div when position is absolute. Strange.

Improve this question
1
  • Draggable with iFrameFix was still laggy for me. Dialog worked better, if a dialog is an acceptable solution. It's still draggable but also closeable.
    – user420667
    Commented Mar 29, 2017 at 23:48

3 Answers 3

Reset to default
9

try this

$('#Div').draggable({ iframeFix: true });

this should work

Improve this answer
0
7
+50

I decided to take a stab at this and boy, it's a lot of work with little progress using an internal iframe node as a handle. Anyway, here are two solutions, the first one doesn't work really well, but if you can get it to work, it may be more desirable.

main.html (plagiarized from the demo)

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
</div>

inner-handle.html

<html>
    <head>
        <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    </head>
    <body>
        <div id="innerHandle">handle</div>
    </body>
</html>

JavaScript

$(function () {
    var moveEvent;
    $(document).mousemove(function (e) {
        moveEvent = e;
    });

    $("#draggable").draggable();
    $('iframe', '#draggable').load(function () {
        $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
            $('#draggable').draggable().data('draggable')._mouseDown(moveEvent);
            return false;
        });
    });
});

It took me a while to find something that "worked." The problem here was that since the mousedown event occurred on an element inside the iframe, the mouse event is relative to the iframe, not the main document. The workaround is to have a move event on the document and grab the mouse position from there. The problem, once again, is that if the mouse is inside of the iframe, it is "not" moving according to the parent document. This means that the drag event only happens when the mouse reaches the edge of the iframe into the parent document.

A workaround for this might be to manually generate events with the calculated position of the iframe relative to its mouse movement. So when your mouse moves within the iframe, calculate its movement using the coordinate of the iframe to the parent document. This means that you need to use the event from the mousedown and not the mousemove,

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) {
    // do something with e
    $('#draggable').draggable().data('draggable')._mouseDown(e);
    return false;
});

The second solution is the way you have mentioned, have an absolute positioned div over the iframe itself. I have no trouble in getting the div to be on top of the iframe, that is,

<div id="draggable" class="ui-widget-content" style="position:relative;">
    <p class="ui-widget-header">I can be dragged only by this handle</p>
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe>
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div>
</div>

The problem with your div being behind the iframe might be because the z-index is off. If you declare your div before the iframe and you didn't specify the z-index, then the iframe will be on top.

Whichever way you choose, good luck!

Improve this answer
2
  • Woah thanks for your hard work. I think I will try the second solution. The first would be too buggy I think. Thanks a lot!
    – Louis
    Commented Aug 13, 2010 at 8:16
  • I wanted to build off of this solution. I ended up going with option 2 due to the simplicity. However I noticed that when my mouse entered the iframe (out of the absolutely positioned 'handle') I would lose the ability to freely drag. A solution I found to work was to remove and add pointer events to the iframe when the 'handle' is clicked and when the mouse is released. I got the idea from stackoverflow.com/a/42391645/12853985 This makes the behavior feel really good and it is only a few lines of code!
    – Zen
    Commented Feb 2, 2023 at 19:11
0

what happens when you do this (with firebug activated):

var frameContent = $('iframe',node).contents()
var handle = frameContent.find('#handle');
console.debug(frameContent, handle)

Does handle contain a list of elements? And if so, look carefully at the Document object which is frameContent - is the URL "about:blank"? It's just a hunch, but if you get these outputs, it's probably executing the jQuery selector before the frame content has loaded (i.e., before the #handle element exists).

In which case, you can add an event to the IFRAME'd document, and communicate with the parent frame via window.parent.

Improve this answer
1
  • Not able to test now so will try soon but I am changing the option on window.onload in the iframe so I assume it is ready. When I log the contents of what is found it is the correct DOM element. Maybe it just isn't possible.
    – Louis
    Commented Aug 10, 2010 at 0:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.