possible de contraindre le redimensionnement de jQuery sur l'axe x ou y, comme la contrainte de glissement?

Question

Cette jQuery vous permet de limiter le mouvement de glisser de sorte qu'il ne se produit que sur l'axe indiqué:

$("#draggable2").draggable({ axis: 'x' }); 

Voir: http://jqueryui.com/demos/draggable/#constrain-movement

Ce n'est pas jQuery juridique, mais je veux dire:

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } }); 

Est-il possible d'empêcher l'utilisateur de rendre #Container plus large tout en lui permettant de le rendre plus grand?

Merci

Answer 1

Oui, c'est possible en utilisant des événements d'interface utilisateur. Le long de l'axe des x:

$("#Container").resizable({ 
    resize: function(event, ui) { 
     ui.size.width = ui.originalSize.width; 
    } 
}); 

ou le long de l'axe y:

$("#Container").resizable({ 
    resize: function(event, ui) { 
     ui.size.height = ui.originalSize.height; 
    } 
}); 

Answer 2

Je vois deux façons de faire cela, mieux que l'autre. La meilleure en premier:

1) Définissez minWidth et maxWidth à la même valeur (à savoir la valeur que vous voulez que la largeur reste).

$('#theThing').resizable({ minWidth = 200, maxWidth = 200 }); 

2) Créer un élément parent avec une largeur fixe et en faire l'enceinte de confinement. Je ne sais pas comment cela fonctionnera sur la hauteur, mais par défaut un div sans hauteur spécifiée augmente si son contenu le fait, donc cela peut fonctionner.

Answer 3

ces réponses travailler deux, mais ils ont la conséquence malheureuse de montrer un < -> curseur sur la frontière orientale , faisant croire à l'utilisateur qu'il pourrait redimensionner la largeur. Ce que je pense est une meilleure correspondance est d'appeler cela sur l'objet jQuery:

.resizable({handles:'s'})

car cela enlèvera simplement la possibilité de changer la largeur, et le curseur.

Answer 4

J'ai trouvé que juste effacer sur le style de hauteur ou de largeur en ligne sur l'objet sur le redimensionnement fonctionne également. Il a également l'avantage de ne pas être lié aux dimensions originales de l'objet (puisque celles-ci peuvent changer en fonction du contenu)

$("#Container").resizable({ 
    resize: function(event, ui) { 
     $(this).css('height',''); 
    } 
});