Utilisation de JQQUERY UI Resisizable J'essaie d'éviter de redimensionner en fonction de diverses règles. La fonction de confinement intégrée ne semble pas fonctionner correctement avec des éléments absolument positionnés et j'aurais besoin de quelque chose de plus flexible que celui de toute façon.
avoir quelque chose comme ceci: P>
$( ".selector" ).resizable({ resize : function(event, ui) { /* ??? */ } });
9 Réponses :
ne semble pas être possible avec la version actuelle.
Je suppose que vous pourriez faire quelque chose comme ça:
$(Selector).css("min-hight", Size);
$(Selector).css("max-hight", Size);
C'est très simple, jetez un coup d'œil à ce code pour des colonnes divisées à diviser "gauches" avec une fixation de largeur et des limites les unes des autres.
var maxWidthOffset, total2Width;
$('#'+this.id).find('ul:not(:last)').resizable({
handles: 'e',
ghost: true,
delay: 200,
helper: "overmoused",
minWidth: 20,
start: function(e, ui) {
maxWidthOffset = ui.element.next().width()-20;
total2Width = ui.element.width()+maxWidthOffset+20;
},
resize: function(e, ui) {
if (ui.size.width > (ui.originalSize.width + maxWidthOffset)) {
$(this).resizable('widget').trigger('mouseup');
}
},
stop: function(e, ui) {
var w;
if (ui.originalSize.width > ui.size.width) {
w = ui.element.next().width()+ui.originalSize.width - ui.size.width;
ui.element.next().width(w>20 ? w : 20);
} else {
w = ui.element.next().width()-(ui.size.width - ui.originalSize.width);
ui.element.next().width(w>20 ? w : 20);
}
ui.element.width(total2Width-ui.element.next().width());
}
});
Oui MouseUp fonctionne bien. Je ne comprends pas pourquoi l'équipe JQueryui n'ajoute pas de fonctionnalités aussi utiles à l'API. J'ai toujours besoin de pirater quelque chose lorsque vous travaillez avec JQueryui.
Le MouseUp fonctionne mais ne sera pas utile si l'utilisateur tente de faire quelque chose d'autre dans l'état de MouseDown E.G. traîner un div.
Il suffit de définir les propriétés de l'UI Directy dans l'événement Redimentation. (Vous pouvez également faire cela sur l'événement d'arrêt si vous préférez):
$(".selector").resizable({
resize: function(event, ui) {
// set directly
ui.size.height = 150;
ui.size.width = 150;
}
});
$(".selector2").resizable({
resize: function(event, ui) {
// return value from another function
restrictSize(ui);
}
});
function restrictSize(ui) {
maxheight = 250;
maxwidth = 300;
ui.size.height = ui.size.height > maxheight ? maxheight : ui.size.height;
ui.size.width = ui.size.width > maxwidth ? maxwidth : ui.size.width;
}
Votre réponse est exactement ce que je voulais savoir: «Comment définir la taille pendant le redimensionnement?». merci, m'a sauvé des ennuis
Il n'y a pas d'option standard pour arrêter le redimensionnement à cette version. Vous pouvez désactiver la redimensionnable, mais il continuera à redimensionner et arrêtera la possibilité de redimensionner uniquement lors de la prochaine fois que vous essayez.
$(".selector").resizable({
aspectRatio: true,
handles: 'all',
resize: function( event, ui ){
if(x > y){
(".selector").resizable("option","maxWidth",ui.size.width);
return;
}
}
});
C'est la réponse la plus correcte pour cesser de résoudre en fonction de diverses règles. Bien que j'utilise $ (ceci) à l'intérieur de l'événement de redimensionnement et non $ ('. Sélecteur')
Certainement la voie à suivre et aussi plus simple que la réponse de Alexey
La réponse que vous avez choisie comme correcte n'est pas entièrement correcte. Ceci est réalisable:
Utilisez une assistante inutile pour arrêter le redimensionnement sur l'événement de redimensionnement: dans l'événement de redimensionnement modifier les dimensions et la position redimensionnables comme vous le souhaitez. Vous avez toujours un problème avec l'événement STOP. Droit avant que l'événement d'arrêt ne soit déclenché, JQuery redimensionne votre élément - que vous ne voulez pas. Tout ce que vous pouvez faire est de réinitialiser l'état de l'objet, car c'était la dernière fois que l'événement de redimensionnement déclenché. Donc, dans l'événement STOP, vous pouvez réinitialiser vos dimensions et votre position redimensionnables, car elles sont définies par vous dans le dernier événement «redimensionnement» déclenché. Pour cela, vous devrez déclarer certaines variables dans un contexte plus élevé ou utiliser la méthode de JQuery's Element.Data () - votre choix (vous pouvez même créer un clone invisible de l'objet entier si cela vous semble plus confortable). Voici un aperçu de la structure de code final:
Son été longtemps, mais il y a une solution à ce problème au cas où quelqu'un lisait ceci.
Il vous suffit de définir le Vous pouvez faire quelque chose comme ce qui suit: maxwidth ou minwidth (dépend sur ce que vous voulez faire) à l'intérieur du redimensionner pour l'arrêter de redimensionnement.
Il y a une voie gênante en interceptant les deux malheureusement il y a une "bordure" de 4 pixels sur la poignée de redimensionnement, vous devez donc appliquer une légère correction pour éviter la zone redimensable "sauter" lorsque vous abandonnez l'opération de redimensionnement. Cette solution revient à la position initiale en supposant que la même règle s'applique à la même règle. fois. Vous pouvez bien sûr adapter cela en ne sauvegardant pas la position initiale et la taille, mais la recalculant sur la volée pendant le redimensionnement. Dans ce cas, vous n'avez pas besoin d'interception start et redimensionner : Démarrer du tout.
Si vous n'avez pas besoin de continuer l'état de MouseDown, vous pouvez simplement déclencher MouseUp:
var resizableSettings = {
start: function(event, element) {
if (a > b) {
$(this).resizable('option', {
'maxWidth': element.size.width,
'minWidth': element.size.width,
'maxHeight': element.size.height,
'minHeight': element.size.height
});
return;
}
$(this).resizable('option', {
'maxWidth': false,
'minWidth': false,
'maxHeight': false,
'minHeight': false
});
}
};
Avez-vous pu résoudre celui-ci?
J'ai eu des problèmes avec le sommet Dom jusqu'à ce que je fixe l'élément contenant au positionnement relatif.