如何将元素从外部移动/拖动到 iframe [英] How to move / drag element from outside to iframe

问题描述

我需要将元素从 iframe 外部移动到 iframe 中.我的元素面板不是 iframe 的一部分，但我的画布在 iframe 中并且想要将元素移入其中.

I need to move element from outside an iframe into an iframe. My element panel is not part of iframe but my canvas is in the iframe and want to move element into it.

我尝试了以下代码:

 element_source = self._selenium.find_element(By.XPATH,
                                          '//div[@class="gjs-block-label"][contains(.,"Tooltip")]')
    element_target=self._selenium.find_element(By.CLASS_NAME,'gjs-frame')
    actions = ActionChains(self._driver)
    actions.drag_and_drop(element_source, element_target).perform()
    time.sleep(5)

看起来问题是我必须在移动元素之前切换到 iframe，但在这里我没有看到这种可能性，因为 drag_and_drop 是组合方法，其中我的 element_source 不在iframe 和 element_target 是 iframe 本身.

It looks like the issue is that I have to switch to the iframe before I move element, but here I don't see that possibility because drag_and_drop is combined method where my element_source is out of the iframe and element_target is the iframe itself.

所以如果我在拖放之前切换，它甚至找不到element_source.

So if I switch before drag and drop, it can't find even element_source.

这是我正在处理的演示页面:https://grapesjs.com/demo.html

Here is demo page where I am working on : https://grapesjs.com/demo.html

在上面的演示中，左侧是 iframe，右侧面板是元素的集合.

In above demo left side is iframe and right panel is collection of elements.

推荐答案

按照@supputuri 链接的答案中的建议使用 JS 消息传递可能无法完全模拟实际用户执行的典型拖放操作.

Using JS message passing as suggested in the answer linked by @supputuri might not exactly simulate a typical drag and drop as performed by an actual user.

一种可能的解决方案是尝试扩展 Selenium ActionChains API 并实现新方法，允许您开始在一帧上拖动，切换到 iframe 并放在那里.我确信该 API 是可扩展的，但无法说明实施此解决方案的可能性或容易程度.

One possible solution would be to try extending the Selenium ActionChains API and implement new method(s) that would allow you to start the drag on one frame, switch to the iframe and drop there. I know for sure that the API is extensible like that, but cannot speak for how possible or easy to implement this solution would be.

另一种选择是根据有关两个帧上元素的已知信息进行一些计算，以获取要放置元素的位置的偏移量，然后使用 Actions API 中的一些适当方法 - drag_and_drop_by_offset 或 click_and_hold、move_by_offset、move_to_element、move_to_element_with_offset 和 release 的某种组合.

Another option is to do some calculations based on known info about elements on both frames to get the offset for where you want to drop the element, then use some appropriate method from the Actions API - either drag_and_drop_by_offset, or some combination of click_and_hold, move_by_offset, move_to_element, move_to_element_with_offset and release.

如果我有时间，我会尝试其中的几个，然后告诉您是否有效.

If I have the time, I'll try a couple of these and let you know if it works.

尽管这个答案的第一行说了什么，当我不得不自己处理葡萄时，最终工作的是我使用刚刚访问的 webdriver execute_script 方法运行的一些自定义 js附加到 window 的葡萄 js editor 对象.使用我想要添加的内容调用 editor.addComponents 就可以了.但是，我必须在用户在页面上看到的块标签到该组件的内部块 ID 和 HTML 内容之间创建一个映射，这样我就可以传递用户看到的组件的标签/名称，它会得到添加.也许有一种理想的解决方案可以模拟实际用户通过拖放所做的所有操作，但我还没有做到.

Despite what the first line of this answer says, what ended up working when I had to work with grapes myself, was some custom js that I ran using the webdriver execute_script method that just accessed the grapes js editor object which is attached to the window. Calling editor.addComponents with the content that I wanted to add did the trick. But, I had to create a mapping between the block labels that users see on the page to the internal block IDs and HTML content for that component, so I could just pass the label/name that a user sees for the component and it would get added. Maybe there is an ideal solution that mimics all the actions that an actual user does with the drag and drop, but I haven't got there yet.

这篇关于如何将元素从外部移动/拖动到 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！