jQuery UI resizable snap to size

问题:

I have a left-side navigation which is resizable. The default width is 200 and I want the resizer to snap to that width. Currently I have this if-clause which is working fine but I don't know how to snap to that width programmatically.

resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 20){
        // snap to 200 width
    }
}

Would be great if someone could help me here :)

回答1:

Ok got it working. Simply set the width of the element to 200. It has a tolerance of 15px so if the element is between 185 and 215px it will snap to 200px.

$("#left").resizable({
minWidth: 60,
handles: "e",
resize: function (event, ui) {
    if(Math.abs(200 - ui.size.width) <= 15){
        $("#left").css("width", 200);
    }
}

回答2:

How about something like $(ui).width(200); ? Please note that I have no idea about what is uiin your code so you may have to adapt the jQueryselector.

回答3:

As there : http://jqueryui.com/resizable/#max-min you can use this :

$(function() {
    $( "#left" ).resizable({
      maxWidth: 200,
      minWidth: 20
    });
});

回答4:

I would check for a width within a range so that the 'snap' happens from either side.

resize: function (event, ui) {
    if(ui.size.width >= 180 && ui.size.width <= 220){
        // snap to 200 width
    }
}