将元素拖放到iframe中。可放置区域的坐标错误，碰撞错误 [英] Drag and drop elements into an iframe. Droppable area has wrong coordinates and collisions are wrong
问题描述
我需要在Web应用程序之间实现拖放功能，在网页中存在的元素和iframe中的元素之间（在开始抱怨iframe之前，我需要技术原因，这不是一个选项）。 / p>
我在页面中的元素可以拖动到iframe中的目标可拖放元素中。
尽管这两个库都存在同样的问题，但是它们同时使用了jQuery UI和YUI，但是目标元素（droppable target）坐标被误解，两个库所考虑的丢弃区域是错误的，并不代表实际的可抽取对象，因此被拖动的对象和被删除的元素之间的碰撞完全混乱。这就像图书馆看到droppable元素位于另一个地方，它的有效位置。
我认为这是因为iframe不位于页面的左上角，但在中间。我认为这是因为我读过很多人抱怨这个问题，如果iframe位于左上角，问题就会消失。有人建议可以基于screenX和screenY而不是clientX和clientY计算可拖放元素的坐标，这可能是问题的原因，而不考虑元素在iframe内，因此坐标不同在iframe之外的其他元素之间。
所以，因为它似乎没有办法直接使用库功能修复，我真的没有时间尝试每一个图书馆在那里，我正在考虑通过修改（修补）所涉及的图书馆的内部功能来修复问题。
问题是： / strong>
1）有人曾经遇到此行为，并设法解决问题？或者，是否有可以完美无瑕的图书馆？
2）有没有办法使用图书馆本身的方法和功能来解决这个问题？如果没有，
3）有人知道库的哪个部分计算可放置的区域坐标，以便我可以将其修复为最后的极限选项？
提前感谢，即使是最小的帮助将不胜感激！
编辑
这个小提琴演示了这个问题。尝试将绿色正方形移动到红色正方形内（这是一个iframe）。你会注意到两个方块之间的碰撞是错误的。
这不是一个银弹但是，我会继续发表这个答案，但我不知道它将为您带来多少价值。我在jQuery UI中跟踪了一个关键功能，这可能是您正在寻找的。它在 $。ui.ddmanager （拖放管理器）中，函数是 prepareOffsets 。这行：
m [i] .offset = m [i] .element.offset（）;
似乎是在实际删除元素时设置要使用的偏移量。这可能是一个根据可拖放元素是否是iframe的子代来调整结果偏移的地方。
上面还有另一个函数 $。ui.intersect ，执行逻辑来查看可拖动和可拖放是否相互交叉。
我在最新版本的jQuery UI，而且该文件是2012-2029版本的 jquery-ui-1.8.14.custom.js 。如果您获得单个可下载文件本身，那么它的第203-220行就可以使用这个文件，例如jquery.ui.droppable.js 。这些是dev文件，而不是min文件。
I need to implement drag and drop functionalities in a web application between elements present in a web page, and elements inside an iframe (before you start complaining about iframes, I NEED it for technical reasons, it's not an option).
I have elements in the page that can be dragged into target droppable elements inside an iframe.
I've managed to do it with both jQuery UI and YUI, though both libraries present the same problem: the target element (droppable target) coordinates are misinterpreted, the drop area considered by both libraries is wrong and does not represent the actual droppable object, hence the collisions between the dragged object and the dropped element are messed up entirely. It's like the library sees the droppable element positioned in another place from where it effectively is.
I think this is due to the iframe not being positioned on top-left of page, but in the middle. I think this because I've read many people complaining about this issue and the problem went off if the iframe was top-left positioned. Someone suggest that the coordinates of the droppable element may be calculated based on screenX and screenY, instead of clientX and clientY, and this may be the cause of the issue, not taking into consideration the elements are inside an iframe, and so the coordinates differ between other elements outside the iframe.
So, since it seems there's no way to fix this directly using the library functionalities, and I really don't have time to try every library avaiable out there, I'm thinking about fixing the issue by modifying (patching) the internal functions of the library in question.
The questions are:
1) Did someone experience this behavior before, and managed to fix the issue? Or, is there a library which is able to do this flawlessly?
2) Is there some way to fix this issue using the methods and functionalities of the library itself? And if not,
3) Does somebody know which part of the library calculates the droppable area coordinates, so that I can fix it as a last extreme option?
Thanks in advance, even the smallest help will be appreciated!
EDIT
This fiddle demonstrate the problem. Try to move the green square inside the red square (which is inside an iframe). You will notice the collision between the two squares is wrong.
This is not a "silver bullet" , but I'll go ahead and post this as an answer, but I'm not sure how much value it will have for you. I tracked down a key function in jQuery UI that might be what you're looking for. It's in $.ui.ddmanager (the drag and drop manager), and the function is prepareOffsets. This line:
m[i].offset = m[i].element.offset();
seems to be the one that is setting up the offset for use when the element is actually dropped. This might be a place to fiddle with to adjust the resulting offset based on whether the droppable element is a child of the iframe.
There is another function above it $.ui.intersect that performs the logic to see if the draggable and droppable are intersecting each other.
I'm in the latest release of jQuery UI, and the file is jquery-ui-1.8.14.custom.js on line 2012-2029. If you get the single droppable file itself, jquery.ui.droppable.js, it's on lines 203-220. And these are the dev files, not the min files.
这篇关于将元素拖放到iframe中。可放置区域的坐标错误，碰撞错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
