JQuery Draggable и Resizeable над IFrames (решение)

Недавно я столкнулся с некоторыми проблемами, используя плагины JQuery Draggable и Resizable. Ища решения, я нашел очень фрагментированный код во многих разных местах и, наконец, подал заявку на чистое решение, которое, кажется, работает почти идеально для меня.

Я думал, что буду делиться своими выводами для кого-то еще, если они придут к этой проблеме тоже.

У меня есть div, который содержит и IFrame. Этот div должен быть изменен по размеру и перетаскиваться. Достаточно просто - добавьте jquery draggable и resizable в div так:

$("#Div").draggable();
$("#Div").resizable();

Все в порядке, пока вы не перетащите другой div, содержащий iframe, или попробуйте изменить размер текущего div, переместив ваш текущий iframe. Обе функции останавливаются, когда над iframe.

Решение:

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

Наслаждайтесь!

PS: некоторый дополнительный код для создания окон, которые, когда они выбраны, переносятся на передний план других перетаскиваемых объектов:

В перетаскиваемой функции запуска -

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) {
    if ($(element).css("z-index") > maxZ) {
        maxZ = $(element).css("z-index");
    }
});
$(this).css("z-index", maxZ + 1);

Ответы

Ответ 1

Существует несколько способов добиться этого, все зависит от ваших потребностей. Я обнаружил, что изменение размера/перетаскивание многих окон замедляет пользовательский интерфейс, и в результате я закрыл iframes при начале изменения размера/перетаскивания с помощью границы, чтобы помочь навигации.

Есть некоторые jquery-плагины, которые достигают части этой функциональности, но многие борются с iframe.

Приведение на передний план также может быть улучшено в точках и может не работать во всех ситуациях.

Ответ 2

Попробуйте следующее:

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

Это должно работать.

Ответ 3

То, что я сделал, это определить body.dragging iframe {pointer-events: none;}, а затем добавить dragging class to body на событие dragstart и удалить его на событие dragend.

Хорошо работает для меня, не уверен, почему он не упоминался ранее, насколько я могу сказать, что свойство CSS указателя-события уже было в 2010 году.

Ответ 4

Почему так сложно? Существует гораздо более красивое решение:

  • поместите ваш iframe внутри относительного div с некоторым z-индексом, скажем 0
  • make iframe relative также и изменить его z-index на -1 во время перетаскивания:

код:

$("#Div").draggable({
    start: function () {
        $("iframe").css('z-index', '-1');
    },
    stop: function () {
        $("iframe").css('z-index', '0');
    }
});

Ответ 5

Сначала я походил как решение Байрона Кобба, но поскольку я использую элемент диалога, и Iframe не требуется, когда отображается диалог (это диалог сохранения), мне понравилось использовать modal:

$('#savingDialog').dialog({
    modal: true
});