在父框架和子 iframe 之间拖放元素答案

【问题标题】：Drag-Drop elements between parent frame and child iframe在父框架和子 iframe 之间拖放元素
【发布时间】：2013-01-19 11:44:53
【问题描述】：

我正在尝试使用 jQuery 在父框架和 iframe 之间拖放元素。我在父框架中有一个面板，其中包含一些可拖放到子框架上的可拖动项目。我试图搜索很多，但找不到很多...

我试图通过在子框架内附加元素然后尝试以编程方式在新插入的元素上触发可拖动来解决它，但我也被困在那里。找不到触发拖动功能的正确方法。（可拖动元素有一个助手。当我通过触发“mousedown.draggable”触发拖动时，ui-draggable 元素上的位置会发生变化，但我看不到助手。

谢谢！！

【问题讨论】：

标签： jquery drag-and-drop jquery-ui-sortable jquery-ui-draggable droppable

【解决方案1】：

使用 HTML5 拖放 API 创建跨框架和跨浏览器实现。 http://blog.stackhive.com/post/137799349684/building-a-seamless-drag-and-drop-interface

编辑 - 之前的链接无效（dockPHP 更名为 StackHive），因此写了一篇更完整的文章，可以帮助创建史诗般的拖放界面。

【讨论】：

优秀的资源，非常感谢您将您的工作开源！
我的回复有误，通过一些修复工作正常

【解决方案2】：

AFAIK，如果 iframe 来自不同的域，则以“常见”方式无法做到这一点（除非您同时控制两个 iframe），浏览器安全措施会阻止它，否则您可能会包装银行网站并窃取密码，例如，当您登录时。

一些解决方法的信息：http://softwareas.com/cross-domain-communication-with-iframes

如果您同时控制两个 iframe：

按示例在 iframe 之间拖放：http://www.dhtmlx.com/docs/products/dhtmlxTree/samples/05_drag_n_drop/06_pro_drag_frame.html

跨浏览器 HTML5 拖放：http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

另一个示例：http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/

【讨论】：

嘿.. 非常感谢.. 我暂时离开了拖放功能.. 但就我阅读您的链接而言.. 这正是我想要的.. . （是的，我可以控制两个框架）
嘿..我想出了如何使用 jQuery 来做到这一点...拖放|和 ConnectToSortable ...一旦我完善它就会发布我的答案...

【解决方案3】：

无论框架的结构如何，始终可以使用Robot class 在框架上拖放元素。我提供了一个示例代码以防万一：

//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);

【讨论】：