Изменение размера JQuery UI не поддерживает положение: исправлено;Любые рекомендации?

Question

Функция .resizable пользовательского интерфейса JQuery не поддерживает position: fixed; элементы.В тот момент, когда вы пытаетесь изменить их размер, он переключает атрибут позиции на абсолютный.Любые рекомендуемые исправления?

У меня есть несколько всплывающих окон чата, которые можно перетаскивать по всему документу.Они фиксированы, чтобы не прокручивать страницу за ними.Все они работают отлично, пока вы не попытаетесь изменить размер окна, тогда оно переходит к position: absolute; и затем остается позади, когда страница прокручивается.

Я попытался обработать событие остановки изменения размера и изменить положение на фиксированное:

    stop: function (event, ui)
    {
        $(chatWindow).css('position', 'fixed');
    }

Это не работает, потому что позиционирование (top: и left:) не подходит для фиксированного элемента, и когда вы прекращаете изменение размера элемента, переключается на фиксированное позиционирование и переходит в странные места настраница.Иногда выпрыгивает за пределы страницы и теряется навсегда.

Есть предложения?

Answer 1

Чтобы обойти эту проблему, я обернул блок .resizable () блоком .draggable ():

<div id="draggable-dealie">
    <div id="resizable-dealie">
    </div>
</div>

, соответствующий js:

$("#draggable-dealie").draggable();
$("#resizable-dealie").resizable();

, и убедитесь, что у вас естьсвойство position:fixed !important; установлено в CSS # draggable-dealie:

#draggable-dealie {
    position:fixed !important;
    width:auto;
    height:auto;
}

У меня есть демонстрация по адресу: http://jsfiddle.net/smokinjoe/FfRRW/8/

Answer 2

Если, как и у меня, у вас есть фиксированный div в нижней части страницы, тогда вы можете просто добавить! Важный к этим правилам CSS, чтобы он закрепился внизу:

.fixed {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
}

И просто измените его размер на северной границе:

$('.fixed').resizable({
  handles: "n"
});

Answer 3

Просто принудительное положение: фиксируется на элементе, когда изменение размера начинается и когда изменение размера останавливается.

$(".e").draggable().resizable({
   start: function(event, ui) {
      $(".e").css("position", "fixed");
   },
   stop: function(event, ui) {
      $(".e").css("position", "fixed");
   }
});

JSFiddle: http://jsfiddle.net/5feKU/

Answer 4

Вот решение, которое я придумала, это немного больше кода, чем хотелось бы, но оно решает проблему:

$("#test").resizable({stop:function(e, ui) {
    var pane = $(e.target);
    var left = pane.attr("startLeft");
    var top = pane.attr("startTop");
    pane.css("position", "fixed");
    pane.css("top", top);
    pane.css("left", left);
}});
$("#test").draggable({create: function(e, ui) {
    var pane = $(e.target);
    var pos = pane.position();
    pane.attr("startLeft", pos.left + "px");
    pane.attr("startTop", pos.top + "px");
}, stop: function(e, ui) {
    var pane = $(e.target);
    pane.attr("startLeft", ui.position.left + "px");
    pane.attr("startTop", ui.position.top + "px");
}});

При этом сохраняется верхняя и левая позиции в элементе html (требуется действительный тип документа xhtml) и эта информация используется для установки позиции в конце события изменения размера.

Answer 5

Нет красоты, но как насчет сохранения позиции (сверху и слева) в отдельных переменных в начале изменения размера (я думаю, метод называется "start")?

ОБНОВЛЕНИЕ (Спасибо за комментарий ... Событие начинается слишком поздно): Когда JqueryUI генерирует второй объект «ui» при создании объекта с изменяемым размером, он дает этому ui-объекту поле: ui.originalPosition ... Это должно быть положение фиксированного элемента перед изменением размера ...

Answer 6

Это грязное решение, но у меня работает.

this.resizable({
    start:function (event, ui){
         x =ui.originalPosition.left+ $(ui.originalElement).parent().scrollLeft()
         y = ui.originalPosition.top+ $(ui.originalElement).parent().scrollTop()
    },
    resize:function (event, ui){
         $(ui.originalElement).css('left' , x);
         $(ui.originalElement).css('top' , y);
}

Answer 7

У меня была эта проблема сегодня, и я абсолютно ненавижу "неэстетичные" обходные пути ... Поэтому я решил немного поэкспериментировать, чтобы увидеть, не было ли "лучшего" решения ... и в какой-то момент у меня было предчувствие:

HTML:

<div class="fixed"></div>

JavaScript (jquery):

$('.fixed').resizable();
$('.fixed').draggable();

CSS:

.fixed{
    position: fixed !important;
}

Jquery только что переиграл CSS, чёрт!