問題描述

我需要在 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模板網！