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

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

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

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

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

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

Любые предложения?

Ответы

Ответ 1

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

Ответ 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/

Ответ 4

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

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

Ответ 5

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

$("#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 (требуется, чтобы docthype xhtml был действителен) и использует эту информацию для установки позиции в конце события изменения размера.

Ответ 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);
}

Ответ 7

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

HTML:

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

javascript (jquery):

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

CSS

.fixed{
    position: fixed !important;
}

JQuery просто переиграл CSS, черт!