У меня есть перетаскиваемая вещь за пределами iframe, и внутри нее может быть выпадающая цель.Здесь я показал, что iframe содержит фрагмент HTML-кода, который загружен его атрибутом src.
<div id="draggables">
<img src="drag-me.gif">
</div>
<iframe src="iframe-src.html" id="iframe">
<!-- HTML gubbins -->
<div id="droppable"> </div>
<!-- More HTML gubbins -->
</iframe>
Я использую некоторый jQuery (пользовательский интерфейс, перетаскиваемый / сбрасываемый), чтобы делать вещи:
$("#iframe").load(function() {
var $this = $(this);
var contents = $this.contents();
contents.find('#droppable').droppable({
drop: function (event, ui) { alert('dropped'); }
});
$('#draggables img').draggable();
});
Перетаскиваемые объекты становятся перетаскиваемыми, а выпадающие предметы успешно становятся целью перетаскивания.Проблема в том, что зона приземления для зоны падения не там, где она отображается на экране.То есть оповещение срабатывает, когда перетаскиваемый объект падает где-то выше цели сброса, а не на саму цель.
Несколько тестов, которые я провел, показывают, что разница между тем, где цель находится на экране, и местом, где jQueryдумает, что это связано с вертикальным положением iframe на странице, но я не могу найти прямую связь.Кто-нибудь знает, была ли эта проблема кем-то исследована и, возможно, решена?
Если это не удастся, кто-нибудь может подсказать, как я могу загрузить внешний HTML-файл на свою страницу, не используя iframe ибез структур и стилей двух страниц, мешающих друг другу?Я рассматриваю возможность загрузки внутренней страницы напрямую и использования javascript для рисования вокруг нее элементов управления страницей.
TIA Altreus