JavaScript/jQuery drag and drop element between two iframes

问题

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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/28879784/javascript-jquery-drag-and-drop-element-between-two-iframes

标签

javascript

jquery

iframe

drag-and-drop

draggable