jQuery 在父框架和子 iframe 之间拖放元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14692448/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag-Drop elements between parent frame and child iframe
提问by ksb
I am trying to drag-drop elements between parent frame and iframe using jQuery. I have a panel in parent frame which contains some draggable items which can be dropped on the child frame. I tried to search a lot but couldn't find much...
我正在尝试使用 jQuery 在父框架和 iframe 之间拖放元素。我在父框架中有一个面板，其中包含一些可以拖放到子框架上的可拖动项目。我试图搜索很多，但找不到太多......
I tried to work around it by appending the element inside the child frame and then trying to trigger draggable on the newly inserted element programmatically, but I got stuck there as well. Couldn't find the proper way to trigger the drag function. (The draggable element has a helper. When I trigger drag by triggering "mousedown.draggable" the position on the ui-draggable element changes but I cannot see the helper.
我试图通过将元素附加到子框架内，然后尝试以编程方式在新插入的元素上触发 draggable 来解决它，但我也卡在了那里。找不到触发拖动功能的正确方法。（可拖动元素有一个助手。当我通过触发“mousedown.draggable”触发拖动时，ui-draggable 元素上的位置会发生变化，但我看不到助手。
Thanks!!
谢谢！！
回答by ksb
Using HTML5 Drag and Drop API to create Cross Frame and Cross Browser Implementation. http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface
使用 HTML5 拖放 API 创建跨框架和跨浏览器实现。 http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface
EDIT - The previous link wasn't valid (dockPHP got rebranded as StackHive) so have written out a more complete post that can help in creating an epic drag and drop interface.
编辑 - 上一个链接无效（dockPHP 被重新命名为 StackHive）所以写了一篇更完整的文章，可以帮助创建一个史诗般的拖放界面。
回答by Marcos Besteiro López
AFAIK, if iframes come from different domains, this is not doable in a "common" way (unless you control both iframes), browser security measures prevent it, otherwise you could wrap a banking website and steal passwords, for example, when you log in.
AFAIK，如果 iframe 来自不同的域，这不是以“通用”方式可行的（除非您控制两个 iframe），浏览器安全措施会阻止它，否则您可能会包装银行网站并窃取密码，例如，当您登录时在。
Some info on workarounds: http://softwareas.com/cross-domain-communication-with-iframes
关于变通方法的一些信息：http: //softwareas.com/cross-domain-communication-with-iframes
If you control both iframes:
如果您控制两个 iframe：
Drag & Drop between iframes by sample: http://www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/06_pro_drag_frame.html
通过示例在 iframe 之间拖放：http: //www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/06_pro_drag_frame.html
Cross Browser HTML5 Drag and Drop: http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
跨浏览器 HTML5 拖放：http: //www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
Another sample: http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/
另一个示例：http: //jqfaq.com/how-to-implement-drag-and-drop-between-iframes/
回答by Satya
Irrespective of the structure of frames, one can always use Robot classto drag and drop elements across them. I am providing a sample code just in case:
无论框架的结构如何，您始终可以使用Robot 类在它们之间拖放元素。我提供了一个示例代码以防万一：
//Setting up chrome driver
WebDriverManager.getInstance(CHROME).setup();
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
//Redirecting to the website
driver.get("https://codepen.io/rjsmer/full/vvewWp");
Robot robot = new Robot();
robot.mouseMove(x-coordinate1, y-coordinate1);
robot.mousePress(InputEvent.BUTTON1_DOWN_MASK);
Thread.sleep(2000);
robot.mouseMove(x-coordinate2, y-coordinate2);
Thread.sleep(2000);
robot.mouseRelease(InputEvent.BUTTON1_DOWN_MASK);
