JavaScript/jQuery 在两个 iframe 之间拖放元素
Posted
技术标签:
【中文标题】JavaScript/jQuery 在两个 iframe 之间拖放元素【英文标题】：JavaScript/jQuery drag and drop element between two iframes 【发布时间】：2015-05-06 22:28:26 【问题描述】：我有一个包含 2 个 iframe 的页面，它们并排，都来自同一个域。我想将一个元素从一个 iframe 的特定拖放区（例如表格）拖放到另一个特定的拖放区（例如列表）。我检查了有关 *** 和其他地方的所有相关问题，但找不到合适的解决方案。我尝试使用 jQuery UI 可拖动，但问题是返回的可拖动元素包含在 iframe 中。我无法将其拖出 iframe 边界。所以，我的下一个想法是在顶部（父）窗口上创建可拖动元素，但是我想我必须以某种方式从 iframe 上的 dragstart 事件触发父窗口上的拖动事件。但是，当我将鼠标悬停在 drop-frame 上的相应元素上时，我将如何检测 drop 事件？
哦，如果这还不够难，我也想让它在 IE8 上运行 :) 但就目前而言，假设我会为 IE8 找到一个不涉及拖放的后备解决方案。
【问题讨论】：
分两步解决问题。首先，弄清楚如何将一个项目从 iframe 中拖到父文档中。一旦你在那里，从父文档到 iframe 已经解决了。 ***.com/questions/3075696/… 可拖动元素可以是粘性的（单击拾取，再次单击放下），还是必须与按住鼠标/触摸的用户一起使用？ 它必须像通常的拖放一样工作，即按住鼠标进行拖动。否则我已经知道如何模拟行为了。 @KevinB 如果您知道答案，请赐教并索取赏金。类似尤达的答案不是很有帮助:) @AsGoodAsItGets 请显示您的 html 框架和父页面。 【参考方案1】：您可以通过从 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 5 DnD 支持，而且根本没有拖动事件？我将不得不更仔细地研究代码，但你的答案似乎是迄今为止最好的。告诉你什么，如果没有其他人想出更好的东西，你可以得到赏金，至少付出所有的努力！ （顺便说一句，这里有些人会收取 2000 美元！:)） 您提到您希望它在 IE8 中工作。我认为通过一些小的更改（鼠标的 setCapure 和消息的 attachEvent），您应该也可以在 IE8 中使用它。我试着看看我是否能想出一个解决你问题的方法，就因为这两个 cmets :)【参考方案2】：我不会为你写出完整的代码，因为其中涉及到很多代码。但我会给你基本的。它被称为消息元素。您可以将消息元素传递给带有表格的框架中的父窗口。然后，您可以将另一个消息元素从父窗口传递到带有列表的子窗口。
不幸的是，我在制作中唯一能看到的地方是你必须登录才能查看的网站。我的操场服务器对外界是不可见的。否则，我会向您展示一个可行的示例，让您从我这里窃取代码，或者至少了解它的工作原理。
看看你是否将下面列出的 2 组代码放在 2 个文件中，如果你可以让它一起工作，
<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>
我希望这足以让您弄清楚您想要做什么的细节。
【讨论】：
对不起，不，这还不够，我什至看不出与我的问题的相关性。我们谈论的是典型的拖放用户交互，而不是 iframe 之间的通信。在您的示例中，您甚至没有使用 mousedown/move/up 事件。也许我必须更准确地回答我的问题？ 是的，但这是使用的代码，您必须更改代码才能使用鼠标拖动。这个例子展示了如何在框架中从不同的网页发送数据。就像我说的那样，这会给你这个想法。如果你真的想让我为你编程，你必须拿出一些现金。以上是关于JavaScript/jQuery 在两个 iframe 之间拖放元素的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript/jQuery 在两个 iframe 之间拖放元素
Javascript / Jquery 将变量拆分为两个以进行条带集成