JavaScript/jQuery drag and drop element between two iframes

4
votes

I have a page with 2 iframes, side by side, both from the same domain. I want to drag'n'drop an element from a specific drag-zone (e.g. a table) of one iframe to a specific dropzone (e.g. a list) on the other. I checked all related questions on stackoverflow and elsewhere, but I can't find an appropriate solution. I tried it with jQuery UI draggable, but the problem is that the returned draggable element is contained within the iframe. I cannot drag it out of the iframe boundaries. So, my next thought was to create the draggable element on top (parent) window, but then I guess I'd have to somehow trigger a drag event on the parent window from the dragstart event on the iframe. But then, how would I detect the drop event when I mouse over the appropriate elements on the drop-frame?

Oh, and if that's not hard enough already, I'd like to make it work on IE8 too :) But for now, let's just say that I will find a fallback solution for IE8 that will not involve drag'n'drop.

2
javascriptjqueryiframedrag-and-dropdraggable
Attack the problem in two steps. First, figure out how to drag an item from inside an iframe into the parent document. Once you're there, getting from parent document to iframe is already solved. stackoverflow.com/questions/3075696/… - Kevin B
Can the draggable element be sticky (click to pick up, click again to drop), or does it have to work with the user holding the mouse/touch down? - nothingisnecessary
It has to work like usual drag'n'drop, i.e. hold the mouse down to drag. Otherwise I know how to simulate the behaviour already. - AsGoodAsItGets
@KevinB if you know the answer please enlighten us and claim the bounty. Yoda-like answers are not very helpful :) - AsGoodAsItGets
@AsGoodAsItGets Please show your HTML for both frames and the parent page. - nothingisnecessary

2 Answers

9
votes

You can simulate dragging by sending mouse messages from the iframes to the parent, and doing the drag in the parent. Here is a codepen showing dragging list items from one frame to another: http://codepen.io/brenzy/details/zxMZmO/

Since SO wants some code, here is the dragHandler talking to the parent:

$("li").mousedown(function (event) {
  dragElement = $(this);
  if(event.stopPropagation) event.stopPropagation();
  if(event.preventDefault) event.preventDefault();
  event.cancelBubble=true;
  event.returnValue=false;
  return false;
});

$(document).mousemove(function (event) {
  if (dragElement) {
    if (!dragStarted) {
      // tell the parent to start dragging the item
      parent.postMessage({
        action: "dragStart", frame: myId,
        itemText: dragElement.text(), itemId: dragElement.attr('id'),
        offset: {left: event.pageX, top: event.pageY}
      }, '*');
      dragStarted = true;
    } else {
      parent.postMessage({action: "dragMove", frame: myId,
        offset: {left: event.pageX, top: event.pageY}}, '*');
    }
  }
});

$(document).mouseup(function (event) {
  if (dragStarted) {
    parent.postMessage({
      action: "cancelDrag", frame: myId,
      itemText: dragElement.text(), itemId: dragElement.attr('id'),
      offset: {left: event.pageX, top: event.pageY}
    }, '*');
  }
  dragStarted = false;
  dragElement = null;
});

NOTE: This only works in Chrome, but I am pretty sure that you can get it working in other browsers.

0
votes

I am not writing out the full code for you, because there is a lot of code involved in that. But I will give you the basics. It is called a message element. You can pass a message element to the parent window in the frame with a table. Then you would pass another message element from parent window to the child window with the list.

Unfortunately, the only spots I have in production with that going on is on websites that you have to be logged in to view. And my playground server is not viewable to the outside world. Otherwise I would show you a working example and let you steal the code from me, or at least get a good idea as to how it works.

See if you place the 2 sets of code listed below in 2 files if you can get it to work together,

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function () {
                var iframeWin = document.getElementById("da-iframe").contentWindow,
                form = document.getElementById("the-form"),
                myMessage = document.getElementById("my-message");
                myMessage.select();
                form.onsubmit = function () {
                    iframeWin.postMessage(myMessage.value, "http://localhost/payground/");
                    return false;
                };
            };
</script>
    </head>
    <body>
        <form id="the-form" action="/">
                    <input type="text" id="my-message" value="Your message">
                    <input type="submit" value="postMessage">
                </form>

                <iframe id="da-iframe" src="frame.php"></iframe>
    </body>
</html>

Next bit should go in same directory named frame.php

<html><head>
    <script>
        function displayMessage (evt) {
            var message;
            if (evt.origin !== "http://localhost") {
                message = "You are not worthy "+evt.origin;
            }
            else {
                message = "I got " + evt.data + " from " + evt.origin;
            }   
            document.getElementById("received-message").innerHTML = message;
        }

        if (window.addEventListener) {
            // For standards-compliant web browsers
            window.addEventListener("message", displayMessage, false);
        }
        else {
            window.attachEvent("onmessage", displayMessage);
        }
    </script>
    </head>
    <body>
        <div id="received-message">I heard nothing yet</div>
    </body>
</html>

I hope that is enough that you can figure out the details as to what you want to do.