JavaScript/jQuery在两个iFrame之间拖放元素_Javascript_Jquery_Iframe_Drag And Drop_Draggable

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

javascript jquery iframe

JavaScript/jQuery在两个iFrame之间拖放元素,javascript,jquery,iframe,drag-and-drop,draggable,Javascript,Jquery,Iframe,Drag And Drop,Draggable,我有一个包含2个iFrame的页面，它们并排在一起，都来自同一个域。我想将元素从一个iframe的特定拖放区（例如表）拖放到另一个iframe的特定拖放区（例如列表）。我检查了stackoverflow和其他地方的所有相关问题，但找不到合适的解决方案。我尝试使用jQueryUIDraggable，但问题是返回的draggable元素包含在iframe中。我无法将其拖出iframe边界。因此，我的下一个想法是在顶部（父窗口）创建可拖动的元素，但是我想我必须以某种方式从iframe上的dragsta

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

哦，如果这还不够难的话，我想让它也在IE8上工作：）

但就目前而言，我将为IE8找到一个不涉及拖放的后备解决方案。

我不是在为您编写完整的代码，因为其中涉及很多代码。但我会给你基本的。它被称为消息元素。您可以通过表将消息元素传递到框架中的父窗口。然后将另一个消息元素与列表一起从父窗口传递到子窗口

不幸的是，我在制作中唯一能看到的就是你必须登录才能看到的网站。我的游乐场服务器对外部世界不可见。否则，我会向您展示一个工作示例，让您从我这里窃取代码，或者至少了解它的工作原理

查看是否将下面列出的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>


window.onload=函数（）{
var iframeWin=document.getElementById（“da iframe”）.contentWindow，
表单=document.getElementById（“表单”），
myMessage=document.getElementById（“我的消息”）；
myMessage.select（）；
form.onsubmit=函数（）{
iframeWin.postMessage（myMessage.value，“http://localhost/payground/");
返回false；
};
};

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


功能显示信息（evt）{
var消息；
如果（evt.origin！==”http://localhost") {
message=“你不值得”+evt.origin；
}
否则{
message=“我从”+evt.origin获得”+evt.data+”；
}   
document.getElementById（“收到的消息”）.innerHTML=消息；
}
if（window.addEventListener）{
//适用于符合标准的web浏览器
window.addEventListener（“消息”，displayMessage，false）；
}
否则{
attachEvent（“onmessage”，displayMessage）；
}
我什么也没听到

我希望这足够让你弄清楚你想做什么的细节

您可以通过将鼠标消息从iFrame发送到父对象并在父对象中进行拖动来模拟拖动。下面是一个代码笔，显示将列表项从一个帧拖动到另一个帧：

由于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浏览器，但我很确定您可以在其他浏览器中使用它。

分两步解决此问题。首先，了解如何将项目从iframe内部拖到父文档中。一旦到了那里，从父文档到iframe的问题就已经解决了。可拖动元素是否具有粘性（单击可拾取，再次单击可拖放），或者它是否必须与用户按住鼠标/触碰一起工作？它必须像通常的拖放一样工作，即按住鼠标进行拖动。否则我已经知道如何模拟这种行为了。@KevinB如果你知道答案，请告诉我们并要求赏金。类似于尤达的答案没有多大帮助：）@AsGoodAsItGets请显示框架和父页面的HTML。对不起，这还不够，我甚至看不出与我的问题有什么关联。我们讨论的是典型的拖放用户交互，而不是iFrame之间的通信。在示例中，您甚至没有使用mousedown/move/up事件。也许我的问题需要更精确一些？是的，但这是使用的代码，你必须更改代码以进行鼠标拖动。此示例演示如何在框架中从不同网页发送数据。就像我说的，这会让你产生想法。如果你真的想让我为你编程，你必须拿出一些现金。有趣的是，你没有使用原生HTML5DND支持，而且根本没有拖动事件？我必须更仔细地研究代码，但你的答案似乎是目前为止最好的。告诉你，如果没有其他人想出更好的办法，你可以得到赏金，至少付出了所有的努力！（顺便说一句，这里有些人会收取2000美元的费用！：）你提到你想让它在IE8中工作。我认为通过一些小的改变（鼠标的setCapure和消息的attachEvent），您应该能够在IE8中也实现这一点。我试着看看是否能为你的问题找到解决方案，就因为这两条评论：）