Проблема с использованием JQuery UI.Resizable () и UI.Draggable () с iFrame - PullRequest
7 голосов
/ 04 февраля 2009

Я пытаюсь создать диалоговое окно, используя JQuery. Пока я делаю успехи, но сталкиваюсь с некоторыми проблемами с iframe ... Я знаю, что iframes обычно осуждают, но это единственные вещи, которые будут отвечать требованиям проекта.

В любом случае, я могу успешно реализовать изменяемые и перетаскиваемые плагины, но я сталкиваюсь с проблемами, если пользователь перетаскивает их быстро и наводит курсор на iframe, который содержится во внутреннем div диалога. Это сложно объяснить, но приведенный ниже код должен помочь показать, что происходит.

Похоже, что когда мышь пересекает фрейм, фрейм захватывает фокус события mousedown. Мне интересно, есть ли способ обойти это.

Спасибо, Chris

<div id="container" style="border: solid 1px Black; padding: 10px 10px 10px 10px; height: 520px; width: 420px;">
    <iframe id="if" src="http://google.com" style="width: 400px; height: 500px;"></iframe>
</div>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.ui.all.js"></script>
<script type="text/javascript">

$(document).ready(function()
    {
        $("#container").draggable();
        $("#container").resizable(
            {
                alsoResize: "#if"
            }
        ).parent().draggable();
    }
);


РЕДАКТИРОВАТЬ: Для запуска приложения необходимо загрузить файлы jquery, на которые есть ссылки в коде. Код должен быть обратно совместим с предыдущими версиями.

РЕДАКТИРОВАТЬ: я немного изменил код, чтобы немного упростить вещи.

РЕДАКТИРОВАТЬ: я нашел альтернативный способ решения этой проблемы с помощью prototype-window библиотеки. Я бы предпочел использовать jQuery вместо прототипа, так как многие из тестов намного лучше, но из-за моего временного перерыва путь прототипа подойдет. Я все еще заинтересован в выяснении этого, хотя, если у кого-то есть какой-то совет. Еще раз спасибо за вашу помощь.

РЕДАКТИРОВАТЬ: Если я изменю iframe на div, код выше работает безупречно. Проблема заключается только в том, что перетаскиваемые и изменяемые размеры расширений функционируют только тогда, когда задействован iframe.

Ответы [ 6 ]

7 голосов
/ 20 марта 2009

@ aleemb: Я не верю, что это то, о чем он говорит. Я считаю, что проблема заключается в Ифраме, а не в комбинации перетаскиваемого и изменяемого размера.

@ regex: у меня та же проблема, и она также проявилась в предыдущей реализации с использованием прототипа инструментария.

Моя реализация использует Iframe в качестве основы для перетаскивания перетаскиваемых объектов. Чтобы увидеть ошибку, нужно слишком быстро двигать мышью, чтобы курсор покинул край перетаскиваемого DIV. DIV перестает двигаться, а ваша мышь продолжает работать; переместив мышь обратно на поверхность DIV, он снова поднимает DIV и начинает двигаться, даже если вы отпустили щелчок мыши.

Я подозреваю, что события Iframe каким-то образом мешают событиям jquery.

Мое решение состояло в том, чтобы разместить прозрачный тег DIV между Iframe и draggables / resizables.

Таким образом, iframe никогда не видит движения мыши и поэтому не мешает.

РЕДАКТИРОВАТЬ: см. Пример кода: http://dpaste.com/hold/17009/

Wes

UPDATE! Я вернулся к этой проблеме, и iframeFix, кажется, отлично работает во всех браузерах для draggables, но изменяемые размеры не имеют эквивалентного исправления.

Я использовал этот код, чтобы вручную добавить маску DIV:

$elements.resizable({ //mark it as resizable
    containment: "#docCanvas",
    start: function(event, ui) {
        //add a mask over the Iframe to prevent IE from stealing mouse events
        $j("#docCanvas").append("<div id=\"mask\" style=\"background-image:url(images/spacer.gif); position: absolute; z-index: 2; left: 0pt; top: 0pt; right: 0pt; bottom: 0pt;\"></div>");
    },
    stop: function(event, ui) {
        //remove mask when dragging ends
        $j("#mask").remove();
    }
});

И HTML:

<div id="docCanvas" style="position: relative;">
    <iframe src="something.html"></iframe>
</div>

spacer.gif - это прозрачный GIF размером 1x1 пикселей.

Это исправляет проблему для IE7 и IE8. IE6 имеет проблемы с z-index и не может понять, что DIV должен быть между IFrame и DIV с изменяемым размером. Я отказался от IE6.

Wes

3 голосов
/ 04 февраля 2009

Недавно столкнулся с той же проблемой изменяемого размера / изменяемого размера недавно.

// this will make <div id="box"> resizable() and draggable()
$('#box').resizable().parent().draggable();

// same but slightly safer since it checks parent's class
$('#box').resizable().parent('.ui-wrapper').draggable();
1 голос
/ 10 марта 2014

После использования решения, похожего на предложенное @wes, я нашел более простое, без кода JavaScript. Просто добавьте следующее в ваш CSS:

.ui-resizable-resizing:after
{
    content: '';
    position: absolute; 
    z-index: 999; 
    left: 0px; 
    top: 0px; 
    right: 0px;
    bottom: 0px;
}

Как только пользователь начинает изменять размер, jQuery добавляет класс .ui-resizable-resizing, и добавляется оверлей. Обратите внимание, что вам потребуется «position :lative» для объекта с измененным размером.

1 голос
/ 17 ноября 2010

попробуйте

$ ('# Div'). Draggable ({iframeFix: true});

это должно работать

http://docs.jquery.com/UI/API/1.8/Draggable

1 голос
/ 15 августа 2009

К сожалению, существует проблема с iframeFix, заключающаяся в том, что трудно выпустить прозрачные элементы div после их перетаскивания. Раньше я писал еще одну более сильную версию, но, к сожалению, я потерял код ... Если мне удастся решить проблему, я перепишу свой код.

РЕДАКТИРОВАТЬ: ОК, я разработал руководство, но лучший способ сделать это ... по крайней мере, в моем случае

Вы все еще создаете прозрачный элемент div поверх контейнера iframe, когда щелкает содержащий элемент div (onmousedown). Этот прозрачный div расположен сверху: -90%, что должно привести его к iframe (в зависимости от стиля он может быть больше похож на top: -100%;). В onmouseupEvent прозрачного div вы добавляете код для удаления прозрачного div.

JSFUNCTIONS function coverIframes () { $ ( "NormalWindow ") добавить ("."); }

function uncoverIframes() {
    $(".cover").remove();
}

CSS Styling для прозрачного div div.cover { ширина: 100%; высота: 100%; верх: -90%; позиция: относительная; } * +1010 *

Пример HTML

1 голос
/ 17 июля 2009

Полагаю, вы также можете это исправить, добавив параметр "iframeFix" к перетаскиваемой инициализации, как описано в документации в разделе "Параметры" http://jqueryui.com/demos/draggable/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...