Javascript 将元素拖放到iframe中。可放置区域的坐标错误，碰撞错误

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

我在页面中有一些元素，它们可以被拖入iframe中的目标可拖放元素中

我已经设法用jQuery UI和YUI实现了这一点，尽管两个库都存在相同的问题：目标元素（可拖放目标）坐标被误解，两个库考虑的拖放区域都是错误的，并且不代表实际的可拖放对象，因此，被拖动的对象和被删除的元素之间的碰撞会被完全弄乱。这就像库看到可拖放元素位于另一个位置

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

因此，由于似乎没有办法直接使用库功能来解决这个问题，而且我真的没有时间尝试所有可用的库，因此我正在考虑通过修改（修补）相关库的内部功能来解决这个问题

问题是：

1） 以前是否有人经历过这种行为，并设法解决了问题？或者，是否有一个图书馆能够完美地做到这一点

2） 是否有某种方法可以使用库本身的方法和功能来解决此问题？如果没有

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

提前感谢，哪怕是最小的帮助也会被感激

---

编辑

这把小提琴说明了问题所在。尝试将绿色方块移动到红色方块（位于iframe内）内。您将注意到两个正方形之间的碰撞是错误的

这不是一个“银弹”，但我会继续把它作为一个答案发布，但我不确定它对你有多大价值。我在jQueryUI中找到了一个关键函数，这可能正是您想要的。它位于

$.ui.ddmanager

（拖放管理器）中，功能是

prepareOffsets

。这一行：

m[i].offset = m[i].element.offset();

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

上面还有另一个函数

$.ui.intersect

，它执行逻辑以查看可拖动和可拖放是否相互相交

---

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

为了澄清一点，您正在将元素从主网页拖到iframe中的另一个元素中。除了iframe内部的下降点计算错误之外，它似乎工作正常。是吗？@jwatts1980确切地说，我能够在iframe中的目标元素（droppable）内的页面中拖放元素。它可以工作，但目标可放置坐标不正确，显示的可放置区域错误，它与可放置元素坐标不对应。我想我现在明白了。您正在使用内置的可拖放功能，它应该能够为您解决所有的细节问题。但由于它失败了，您认为编辑计算下降点的内置方法比构建自己的逻辑更容易。@jwatts1980是的，我没有时间构建自己的DragAndDrop引擎，这些库做得非常好，并且经过充分测试和跨浏览器兼容。我想我应该通过基于iframe位置指定一个偏移量，或者通过改变计算坐标的方式来解决这个问题。当然，除非有人知道一个更简单的解决方法或正确的方法，也许我错过了。谢谢你的努力！我已经准备了一个工作小提琴与报告的功能，开始玩它！检查这一点，似乎它的工作更好后，偏移量已被修改。。。也许这就是路！看起来好多了。美好的