J'utilise JQuery UI pour mettre en œuvre des éléments redimensionnables / draggibles. Maintenant, je voudrais définir un confinement pour ces éléments qui limite le redimensionnement / le glissant sur trois côtés exactement (!). Par exemple. Regardez ce exemple Jsfiddle . Vous pouvez voir que l'élément contenu ne peut être redimensionné / traîné à l'intérieur de la zone du parent.
Ce que je voudrais réaliser, c'est que l'élément peut dépasser le seuil inférieur et être déplacé vers la bordure inférieure du parent. Néanmoins, le redimensionnement / la traînée doit encore être limité au sommet, à droite et à gauche, comme le prévoit les frontières par les parents.
donc cette modification est ce que je suis venu avec: Si vous jouez avec la bordure inférieure, vous remarquez que la zone du parent est élargi si l'enfant devient trop proche de la bordure inférieure du parent. Malheureusement, cela s'arrête après 20 pixels. Vous devez ensuite relâcher le bouton de la souris et redimensionner / faire glisser à nouveau pour prolonger la surface. Avez-vous une idée pourquoi c'est?
4 Réponses :
On dirait à l'intérieur de l'interface utilisateur JQuery, ils conservent les informations du parent au début de la traînée, donc même si vous changez de taille, il restreindra toujours la glisser.
Pour résoudre le problème, vous pouvez définir votre propre boîte de sélection de confinement. . p> avec le code ci-dessus, il permettra de redimensionner le parent jusqu'à 1000 + 20 de hauteur.
Vous pouvez essayer le code ci-dessus ici (jsfiddle) . P> si nécessaire pour faire une dynamique Conteneur, au début (et dans la méthode de redimensionnement), définissez le nouveau conteneur avec la bonnebointe correcte. P> var p = $("#parentElement");
var dragWidth = parseInt($("#dragElement").css('width'));
var left = p[0].offsetLeft;
var top = p[0].offsetTop;
var width = parseInt(p.css("width"), 10)-dragWidth;
var containment = [left, top, width+left, 1000];
Ok, c'est une approche que je n'ai pas pensé, encore. Mais il est limité aux valeurs absolues, n'est-ce pas? Je voudrais que le confinement soit relatif au parent. L'adaptation manuelle de la position de la boîte de délimitation à la position du parent semble être assez inconvienne et verbeuse.
J'ai ajouté le code pour calculer la boîte de sélection du confinement.
Je viens de mettre à jour Jsfiddle avec la solution fonctionne correctement et de manière dynamique. Je voulais juste avoir une version de travail de la solution là-bas.
Ça c'est bon! Mais je préfère en quelque sorte la solution de CoDedMe en raison de sa simplicité - bien qu'elle ne remplisse pas les demandes totalement couvrant la plupart des cas d'utilisation.
Eh bien que la fonction expandparent ne fonctionne pas car les limites de la conteneur ont été définies par JQuery UI et ne seront pas mises à jour jusqu'à ce que vous publiez la souris.
Donc, je peux penser à deux solutions ici, l'une est élégante et l'autre est Digify
Évidemment, la solution élégante écrivait votre propre méthode contenant gratuitement en bas.
mais maintenant, j'ai une solution délicate en utilisant un élément parent factice et définir sa hauteur à une valeur importante comme 1000 ou une hauteur de fenêtre, puis définir l'attribut caché de débordement pour le vrai parent.
Voici ma solution: Vous devez modifier le code en fonction de votre application que je viens de vous donner le idée
La solution délicate semble être intelligente! Donc, il n'ya aucun moyen de manipuler les valeurs que JQuery UI utilise? Je suppose qu'ils sont installés dans un conteneur quelque part, alors peut-être que l'on peut agir à ce sujet.
Est-ce toujours la meilleure solution pour cet étui d'utilisation particulier? Je cherche à faire la même chose et je veux m'assurer qu'il n'y ait pas eu d'amélioration dans ce domaine récemment.
$("#dragElement")
.draggable({
cursor : "move",
containment : '#Container',
drag : function(event, ui) {
var growAmount = 10;
var cont = $('#Container');
var item = $(ui.helper);
var itemOffset = item.offset();
itemOffset.bottom = itemOffset.top + dProps.item.height();
var contOffset= cont.offset();
contOffset.bottom = contOffset.top + cont.height();
if(itemOffset.bottom >= contOffset.bottom){
var inst = item.draggable("instance");
inst.containment = [inst.containment[0], inst.containment[1], inst.containment[2], inst.containment[3] + growAmount];
cont.height(parseInt(cont.height()) + growAmount);
}
}
});
OK, c'est possible, mais pas sans Shinanigans ...
Fondamentalement, le paramètre réseau de confinement accepté par JQuery's Draggable, n'empêchera que les valeurs fournies. Normalement, le tableau se rapporte à [x1, y1, x2, y2], donc si nous fournissons seulement les 3 premiers, et laissez la 4ème non défini, le fond ne sera pas contraint.
Cependant, cela signifie que nous devons fournir manuellement la gauche, le sommet et
valeurs correctes. Haut et gauche sont assez faciles, mais le droit doit être calculé: Cela fonctionnera bien pour commencer, mais ... et voici le kicker, chaque fois que la
se déplace du conteneur, l'élément glacible devra avoir son attribut de confinement
mis à jour. De plus, cela peut également être un problème si la fenêtre est redimensionnée. Cette
Dit, j'ai un exemple entièrement fonctionnel ici .
Sans avoir testé votre code ou quoi que ce soit, j'ai remarqué la ligne suivante:
si (parentelbottom <= dragelbottom + 20) { peut-être que20 cause-t-il du problème?Eh bien, oui, vous pouvez déplacer l'élément à la position la plus basse possible qui faisait partie de la zone du parent au début du mouvement. Donc, l'extension de la zone n'est pas transmise au modèle de JQuery UI, je suppose.