JavaScript/jQuery在两个iframe之间拖放元素

JavaScript/jQuery drag and drop element between two iframes

本文关键字：iframe 两个 之间 拖放 元素 jQuery JavaScript      更新时间：2023-09-26

我有一个页面，里面有两个并排的iframe，都来自同一个域。我想把一个元素从一个iframe的特定拖放区域（例如表）拖放到另一个ifame的特定拖放区（例如列表）。我检查了stackoverflow和其他地方的所有相关问题，但我找不到合适的解决方案。我在jQueryUIdraggable中尝试过，但问题是返回的draggable元素包含在iframe中。我无法将其拖出iframe边界。因此，我的下一个想法是在顶部（父窗口）创建可拖动元素，但我想我必须以某种方式从iframe上的dragstart事件触发父窗口上的拖动事件。但是，当我将鼠标悬停在放置框上的适当元素上时，我将如何检测放置事件？

哦，如果这还不够难的话，我也想让它在IE8上运行：）但就目前而言，让我们只说我会为IE8找到一个不涉及拖放的后备解决方案。

您可以通过将鼠标消息从iframe发送到父对象，并在父对象中进行拖动来模拟拖动。这是一个代码笔，显示将列表项从一个帧拖动到另一个帧：http://codepen.io/brenzy/details/zxMZmO/

由于SO想要一些代码，下面是dragHandler与父级的对话：

$("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;
});

注意：这只适用于Chrome浏览器，但我确信你可以在其他浏览器中使用它。

我不会为您编写完整的代码，因为其中涉及到很多代码。但我会给你一些基础知识。它被称为消息元素。您可以将消息元素传递给带有表的框架中的父窗口。然后将另一个消息元素从父窗口传递给具有列表的子窗口。

不幸的是，我在制作中唯一的亮点是你必须登录才能查看的网站。而且我的游乐场服务器对外部世界是看不到的。否则，我会给你看一个工作示例，让你从我那里偷代码，或者至少对它的工作原理有个好主意。

看看你是否将下面列出的两组代码放在两个文件中，如果你能让它一起工作，

<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>

下一位应该放在名为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>

我希望这就足够了，你可以弄清楚你想做什么的细节。

相关文章：