JQuery UI resizable does not support position: fix

问题:

JQuery UI's .resizable function does not support position: fixed; elements. The moment you try to resize them it switches their position attribute to absolute. Any recommended fixes?

I have some chat windows that pop up and are draggable around the document. They are position fixed so that they don't scroll with the page behind them. They all work perfectly until you try to resize a window, that's when it transitions to position: absolute; and then gets left behind when the page scrolls.

I tried handling the resize stop event and changing the position to fixed:

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

This doesn't work because the positioning (top: and left:) are not correct for the fixed element and when you stop resizing the element switches to fixed positioning and jumps to weird places on the page. Sometimes jumps out of the page boundries and is lost forever.

Any suggestions?

回答1:

To get over this problem I wrapped the .resizable() block with the .draggable() block:

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

the corresponding js:

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

and ensure you have the property position:fixed !important; set in the #draggable-dealie CSS:

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

I have a demonstration at: http://jsfiddle.net/smokinjoe/FfRRW/8/

回答2:

If, like me, you have a fixed div at the bottom of the page, then you can just add !important to these css rules to make it stick at the bottom :

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

And just make it resizable by its north border :

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

回答3:

Simply force position:fixed on the element when resizing starts and when resizing stops.

$(".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:

No beauty but how about saving the position (top and left) in separate vars on the start of the resize (I think the method is called "start")?

UPDATE (Thank you for the comment... The event fires too late): As JqueryUI generates a second object "ui" on making a object resizable it gives that ui-object a field: ui.originalPosition... That should be the position of the fixed element before the resizing...

回答5:

Here's the solution I came up with, it's a little more code than I'd like, but it fixes the problem:

$("#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");
}});

This stores the top and left position in the html element (needs xhtml doctype to be valid) and uses that information to set the position at the end of the resizing event.

回答6:

This is a dirty solution but works for me.

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:

I had that problem today, and I absolutely hate "un-aesthetic" workarounds... So I decided to experiment a little to see if there wasn't a "better" solution ...and at some point I had a hunch:

html:

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

javascript (jquery):

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

css:

.fixed{
    position: fixed !important;
}

Jquery just got outplayed by CSS, damn!