JQuery с возможностью перетаскивания и изменения размера над IFrames (решение)

Question

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

Я думал, что поделюсь своими результатами для всех, еслиони тоже сталкиваются с этой проблемой.

У меня есть div, который содержит и IFrame.Этот div должен быть изменяемого размера и перетаскиваемым.Достаточно просто - добавьте перетаскиваемый jquery и изменяемый размер к 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);

Answer 1

Попробуйте это:

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

код:

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

Answer 5

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

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