Je me demande s'il y a un moyen de faire glisser la jQuery en train de faire glisser tout droit, en bas et à gauche, à droite. Je veux empêcher l'utilisateur de traîner une div en diagonale. L'utilisation de l'option de grille dans l'interface utilisateur dragoudique n'est pas possible dans ma situation.
http://jqueryui.com/demos/draggable/#constrain-movement
Comment est-ce possible?
merci!
5 Réponses :
Je n'ai pas de code exact pour vous, mais je pourrais peut-être vous diriger dans la bonne direction en vous aidant à penser au problème un peu plus profondément.
Donc, l'utilisateur commence à faire glisser un objet non contraint. Comme l'objet déplace un pixel à l'écart du point de départ, si le premier pixel est à l'un de ces quatre ( x , y ) coordonnées, où x et y sont le point de départ: ( x -1, y -1), ( x - 1, y +1), ( x +1, y -1) ou ( x -1, y +1), il n'est pas certain que l'utilisateur signifie, par exemple, si l'objet est à un bas et à gauche, il est impossible de dire si la contrainte doit être sur le X ou axe y.
Une fois que vous avez déplacé plus d'un pixel, il devient plus facile. Mais vous devez toujours faire des arrondies sur les coordonnées de pixels où, comme dans les coordonnées ci-dessus, ABS ( xoffset ) == ABS ( yoffset ), alors vous pouvez tirer un Événement pour appliquer la contrainte lorsque la distance x et / ou y est supérieure à un petit entier arbitraire, dites "3".
Le problème suivant à traiter est à quelle distance de la dernière cuisson de la contrainte de l'axe souhaitez-vous permettre à l'utilisateur de changer l'axe. Je suppose que vous voulez un effet de grille, vous devrez donc définir un seuil de numéros de pixels déplacé avant de supprimer la contrainte et recherchez la prochaine "direction" que l'utilisateur veut faire glisser.
C'est un défi intéressant et une bonne expérience d'apprentissage si vous comprenez comment le faire.
Utilisez l'événement de glisser sur votre avantage Je ne suis pas sûr à 100% comment, mais à l'intérieur d'ici, vous pouvez faire un chèque sur les coordonnées. Comme dit Jack-Laplante, c'est là que vous comparez. Si les coordonnées sont plus proches de l'axe X que la Y, changez l'axe sur X P> //setter
$('.selector').draggable('option', 'axis', 'x');
Merci pour l'entrée! Je crée une galerie d'images où l'utilisateur va faire glisser une image pour passer à la photo suivante. Si l'utilisateur fait glisser l'image vers le haut ou le bas, un petit texte d'informations sera affiché.
Je pose cette réponse après beaucoup de fidélité pour dire que ce n'est pas possible avec juste jQueryui appelle sur l'objet. Il semble que cela ne vous permettrait pas de changer l'axe de retenue pendant que vous faites glisser déjà.
S'il vous plaît prouver moi mal?
Cela devrait être possible en utilisant un auditeur d'événement de glisser-commande et mettez à jour l'objet UI.Position. Voir Cette réponse pour plus de détails sur cette méthode.
J'ai écrit un plugin qui permet de déplacer une dragage dans les deux axes. Il obtient le travail, mais il serait mieux implémenté comme un JQUERY UI widget plutôt qu'une simple jQuery Plugin.
Démo hébergé: http://jsbin.com/ugadu/1 (modifiable via http://jsbin.com/ugadu/1/edit ) P>
Code du plug-in: P>
$.fn.draggableXY = function(options) {
var defaultOptions = {
distance: 5,
dynamic: false
};
options = $.extend(defaultOptions, options);
this.draggable({
distance: options.distance,
start: function (event, ui) {
ui.helper.data('draggableXY.originalPosition', ui.position || {top: 0, left: 0});
ui.helper.data('draggableXY.newDrag', true);
},
drag: function (event, ui) {
var originalPosition = ui.helper.data('draggableXY.originalPosition');
var deltaX = Math.abs(originalPosition.left - ui.position.left);
var deltaY = Math.abs(originalPosition.top - ui.position.top);
var newDrag = options.dynamic || ui.helper.data('draggableXY.newDrag');
ui.helper.data('draggableXY.newDrag', false);
var xMax = newDrag ? Math.max(deltaX, deltaY) === deltaX : ui.helper.data('draggableXY.xMax');
ui.helper.data('draggableXY.xMax', xMax);
var newPosition = ui.position;
if(xMax) {
newPosition.top = originalPosition.top;
}
if(!xMax){
newPosition.left = originalPosition.left;
}
return newPosition;
}
});
};
Argh! Désolé, il y avait une ligne de débogage là-bas qui l'a cassé à moins que vous n'ayez pas ouvert à Firebug. Je l'ai réparé et j'ai changé le lien dans la réponse.
J'ai fabriqué une version modifiée de votre code dans le thread suivant pour prendre en charge le glissement avec l'assouplissement. C'est un grand morceau de code que vous avez écrit il y a quelques années. Stackoverflow.com/Questtions/6398854/JQUERY-DRAGGABLE-WIHHEA SE
On dirait que plus de 250 personnes ont édité votre code et cela ne fonctionne plus, changeant l'URL pour revenir à la première révision. JSBIN.com/ugadu/1
Merci de me laisser savoir @johannes. J'ai corrigé les liens.
@Johannes @brianpeiris Ajout Grid: [80, 80], Attribut - Le premier div ("Vous pouvez me faire glisser dans les deux axes!") Ne fonctionnant pas correctement uniquement sur x Axes non Y
JQueryUI prend en charge deux méthodes de contrôle du glissement sur une piste fixe.
Vous pouvez utiliser l'option Axe pour limiter le déplacement du mouvement sur un Axe particulier. Par exemple: p>
$('.draggable_track').draggable({ containment: [0,0, 250, 24] });
or to just use the parent element as a reference track:
$('.draggable_track').draggable({ containment: 'parent' });
Vous pouvez contraindre le mouvement à l'aide d'un élément ou d'un tableau de x / y coordonnées qui définissent une boîte à bornes. p>
$('.draggable_horiz').draggable({axis: "x"});
Si vous pouvez faire glisser un objet à gauche et à droite, de haut en bas ... ne pouvez-vous pas le faire glisser en diagonale? Ou parlez-vous de la "position de départ" seulement? C'est-à-dire que si vous commencez à 0,0 et que vous passez à un point au-delà de 0, -3 ... Soudain, vous êtes soudainement contraint de verticalement?
Oui, c'est exactement ce que je veux réaliser.
Eh bien, j'ai écrit le code pour le faire correctement et JQuery ne vous permettra pas de changer l'axe pendant que cela est traîné.