将元素拖放到 iframe 中.可放置区域坐标错误，碰

问题描述

我需要在 Web 应用程序中在网页中的元素和 iframe 内的元素之间实现拖放功能(在您开始抱怨 iframe 之前，出于技术原因，我需要它，这不是一个选项).

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).

我在页面中有一些元素可以拖到 iframe 内的目标可放置元素中.

I have elements in the page that can be dragged into target droppable elements inside an iframe.

我已经设法使用 jQuery UI 和 YUI 来做到这一点，尽管这两个库都存在相同的问题:目标元素(可放置目标)坐标被误解，两个库考虑的放置区域是错误的并且不代表实际的可放置对象，因此拖动的对象和放置的元素之间的碰撞完全搞砸了.这就像图书馆看到可放置元素位于另一个位置，而不是它有效的位置.

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.

我认为这是由于 iframe 没有位于页面的左上角，而是位于中间.我认为这是因为我读过很多人抱怨这个问题，如果 iframe 位于左上角，问题就会消失.有人建议可以根据screenX和screenY计算droppable元素的坐标，而不是clientX和clientY，这可能是问题的原因，没有考虑到元素在iframe内，所以坐标不同在 iframe 之外的其他元素之间.

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.

问题是:

1) 之前是否有人遇到过这种行为，并设法解决了这个问题?或者，有没有一个库可以完美地做到这一点?

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) 有没有办法使用库本身的方法和功能来解决这个问题?如果没有，

2) Is there some way to fix this issue using the methods and functionalities of the library itself? And if not,

3) 有人知道库的哪个部分计算可放置区域坐标，以便我可以将其修复为最后一个极端选项吗?

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!

编辑

这个小提琴演示了这个问题.尝试将绿色方块移动到红色方块内(位于 iframe 内).你会注意到两个方块之间的碰撞是错误的.

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.

http://jsfiddle.net/DQdZ9/23/

推荐答案

这不是灵丹妙药"，但我会继续发布这个作为答案，但我不确定它会有多大价值有你.我在 jQuery UI 中找到了一个可能是您正在寻找的关键功能.它在$.ui.ddmanager(拖放管理器)中，函数是prepareOffsets.这一行:

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

似乎是设置偏移量以在元素实际被删除时使用.这可能是一个根据可放置元素是否是 iframe 的子元素来调整结果偏移量的地方.

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.

它上面还有另一个函数$.ui.intersect，它执行逻辑来查看draggable和droppable是否相互交叉.

There is another function above it $.ui.intersect that performs the logic to see if the draggable and droppable are intersecting each other.

我在最新版本的 jQuery UI 中，文件是 jquery-ui-1.8.14.custom.js 行 2012-2029.如果您获得单个可放置文件本身，jquery.ui.droppable.js，它位于第 203-220 行.这些是 dev 文件，而不是 min 文件.

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 中.可放置区域坐标错误，碰撞错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！