Недавно я столкнулся с некоторыми проблемами, используя плагины 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);