10
votes

JQuery UI Refenseable - Direction de l'opération

Comment puis-je déterminer la direction de l'opération de redimensionnement? J'ai essayé de googler et j'ai trouvé un ticket sur l'interface utilisateur JQuery, cela a déclaré qu'il est corrigé. Mais il n'y a pas de DOC sur la façon de l'utiliser.


2 commentaires

Je voudrais aussi savoir quelle poignée a été cliquée au début du redimensionnement.


S'il vous plaît voir ma réponse Stackoverflow.com/a/20833716/776687


7 Réponses :


3
votes

Je pense que l'option poignées est ce que vous êtes après: xxx

où les lettres représentent des directions géographiques:

  • N - NORD (TOP)
  • S - Sud (Bottom)
  • E - East (à droite)
  • w - west (gauche)
  • NE - Nord-Est (haut à gauche)
  • SE - Sud-Est (en bas à gauche)
  • NW - Nord-Ouest (en haut à gauche)
  • sw - sud-ouest (en bas à gauche)

    Utilisez n'importe quel sous-ensemble de ce qui précède que vous aimez.

    Vous pouvez trouver la documentation de cette option ici


2 commentaires

Non, l'OP ne veut pas définir les directions possibles, mais pour déterminer quelle direction a été choisie.


Cela ne répond pas à la question initiale.



5
votes

Je ne sais pas si vous vouliez dire que vous souhaitez contraindre l'opération de redimensionnement à un axe particulier, ou si vous souhaitez savoir quelle direction le redimensionnement est réellement survenu.

La réponse de Rayell fonctionne si vous vouliez ancrer . Je discuterai de ce dernier.

Si vous configurez une redimensionnable comme ceci: xxx

disons que vous souhaitez savoir quelle direction le redimensionnement eu lieu dans après l'utilisateur libère le bouton de la souris. Louons une fonction à l'événement d'arrêt de redimensionnement: xxx

à l'aide de l'objet UI transduit, nous pouvons déterminer le changement de taille relative en soustrayant la nouvelle taille de l'ancienne taille. Après cela, vous pouvez utiliser delta_x et delta_y mais vous le souhaitez. Construisons une chaîne qui correspond à l'une des poignées. xxx

Notez que cela ne renvoie pas nécessairement quelle poignée a été utilisée pour effectuer le redimensionnement si vous avez des poignées des deux côtés. de l'élément, seulement sa direction nette.


2 commentaires

Cette solution est cool, lorsque je souhaite déterminer le changement à la fin du redimensionnement. Mais le problème est que j'aimerais connaître la direction au début du redimensionnement. Je sais que cela peut sembler absurde, car je ne peux pas deviner, que l'utilisateur réduira ou étendra la taille. Mais la seule chose que j'ai besoin de savoir, ce que Hanlder a été choisi - Est ou Ouest (seuls les deux sont possibles dans mon application).


Suite à la déclaration finale de cette réponse, cela ne vous échouera-t-il pas si, par exemple, la poignée «ouest» est déplacée? Dans ce cas, si la largeur est diminuée - en déplaçant la poignée est - le delta_x sera inférieur à zéro, de sorte que la direction rapportée sera "W".



5
votes

Dans le démarrage, redimensionnez et arrêtez les rappels:

$(this).data('resizable').axis


0 commentaires

3
votes
$(".ui-resizable-handle").live("mousedown", function(e) {
    $.ui.curResizeDirection = this.className.split("-").pop();
    console.log($.ui.curResizeDirection);
});

0 commentaires

4
votes

Je sais que c'est une question d'il y a longtemps, mais les solutions données ne résolvent pas mon problème. J'ai trouvé un moyen d'accéder au gestionnaire dans la fonction de départ et de travailler dans FF et Chrome. Mon organisation ne supporte pas, c'est-à-dire non testée, mais dans ce cas, la manière FF devrait fonctionner puisqu'il s'agit d'une manipulation des événements plus standard.

var handles = $( ".selector" ).resizable( "option", "handles" );


3 commentaires

Je ressens une chose étrange à ce sujet. Si je clique sur le bord même de la poignée de redimensionnement, l'élément renvoyé est en réalité l'élément présent juste à l'extérieur de l'élément redimensionnable. L'élément redimensionne encore cependant. Toute chance que vous ayez couru dans ça?


Je n'avais aucun problème comme ça, mais les choses que je résiste sont vraiment petites, environ 100px de large avec une hauteur variable. Puisque nous n'avons pas fini par utiliser cela, je trouve juste le changement de taille. Si vous ne redimensionnez qu'un côté qui pourrait être une option.


Oui, je pense que c'est un problème avec un autre événement JQuery Mousemove sur l'autre div, qui interrompt l'événement de redimensionnement original



0
votes

JSONX a une bonne solution mais vous pouvez également utiliser les événements intégrés: xxx

Le code rend l'élément "#Resizable" redimensionnable et met les poignées sur les côtés nord et sud de l'élément. Si la poignée Nord est cliquée et glissée, la poignée de main est 'n'. J'ai été incapable de trouver un moyen similaire de le faire avec l'événement "Stop".


0 commentaires

1
votes

Essayez ce code:

$( "#resizable" ).resizable({
    handles: "n, e, s, w",
    resize: function( event, ui ) {
       //your codes here
    }
});


0 commentaires