jQuery UI redimensionable - dirección de operación

Question

¿Cómo puedo determinar la dirección de la operación de cambio de tamaño? Intenté buscar en Google y encontré un ticket en jquery ui, que decía que estaba arreglado. Pero no hay un documento sobre cómo usarlo.

Answer 1

No estoy seguro de si nos referimos que desea restringir la operación de cambio de tamaño a un eje determinado, o si desea saber qué dirección el cambio de tamaño en realidad Ocurrió en.

La respuesta de RaYell funciona si usted deseaba hacerlo. Discutiré esto último.

Si configura un tamaño variable como esto:

var r = $("#resizable"); 
r.resizable(); 

Digamos que desea saber qué dirección se produjo el cambio de tamaño en después el usuario suelta el botón del ratón. Vamos a enlazar una función al evento de cambio de tamaño parada:

r.bind('resizestop', function(event, ui) { 
    // determine resize deltas 
    var delta_x = ui.size.width - ui.originalSize.width; 
    var delta_y = ui.size.height - ui.originalSize.height; 
} 

Utilizando el objeto de interfaz de usuario pasado, podemos determinar el cambio relativo del tamaño restando el nuevo tamaño del tamaño de edad. Después de eso, puede usar delta_x y delta_y como lo desee. Construyamos una cadena que corresponda a uno de los mangos.

r.bind('resizestop', function(event, ui) { 

    // determine resize deltas 
    var delta_x = ui.size.width - ui.originalSize.width; 
    var delta_y = ui.size.height - ui.originalSize.height; 

    // build direction string 
    var dir = ''; 

    if (delta_y > 0) { 
     dir += 's'; 
    } else if (delta_y < 0) { 
     dir += 'n';   
    }  

    if (delta_x > 0) { 
     dir += 'e'; 
    } else if (delta_x < 0) { 
     dir += 'w'; 
    } 

    // do something with this string 
    alert(dir);   
}); 

Tenga en cuenta que esto no será necesariamente el que volver mango en realidad se utilizó para realizar el cambio de tamaño si usted tiene asas en ambos lados del elemento, sólo que es dirección neta.

Answer 2

Creo que la opción handles es lo que está buscando:

$(selector).resizable({handles: 'n, s, e, w'}) 

donde las letras representan direcciones geográficas:

• n - norte (arriba)
• s - sur (inferior)
• e - este (derecha)
• w - oeste (izquierda)
• ne - Nordeste (arriba a la izquierda)
• SE - sureste (abajo a la izquierda)
• NW - Noroeste (arriba a la izquierda)
• sw - Suroeste (parte inferior izquierda)

Uso cualquier subconjunto de los anteriores que te gusten

Puede encontrar la documentación para esa opción here

Answer 3

En el inicio, cambiar el tamaño, y dejar de devoluciones de llamada:

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

Answer 4

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

Answer 5

Sé que esto es una pregunta de hace mucho tiempo, pero las soluciones dadas no resuelven mi problema. Encontré una manera de llegar al controlador en la función de inicio y está trabajando en FF y Chrome. Mi organización no es compatible con IE, por lo que no se ha probado, pero en este caso la forma FF debería funcionar, ya que es el manejo de eventos más estándar.

$(".resizable").resizable({ 
    start: function (event, ui) { 
     var dir = event.toElement ? event.toElement : event.originalEvent.target; 
    } 
}); 

dir es entonces el controlador real, usted tiene que encontrar la clase y la dirección desde la que (analizo de la lista de clases, si consigo no voy a publicar lo que hago).

Es útil saber la dirección en la que el cambio de tamaño está ocurriendo antes del cambio de tamaño por muchas razones, y realmente creo que jQuery debería haber incluido una forma de saber qué asa se había agarrado.

Más tarde editar: jQueryUI proporciona captadores para su API, en este caso para obtener la lista de mango que acababa de hacer

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

(que es directamente de la boca de los caballos). En mi caso, simplemente verifiqué si era 'n' o 's' (arriba o abajo) y luego calculé el cambio de tamaño en el objeto agarrando el tamaño original en la función de inicio, y usando la función de cambio de tamaño como un ciclo para seguir calculándolo Si el tamaño disminuía, la dirección era hacia arriba si desde el mango sur y hacia abajo si desde el mango norte, y si aumentaba, significaba que la dirección descendía desde el mango sur o hacia arriba desde el mango norte.

Para saber si fue 'n' o 'sacado', acabo de tomar dir desde arriba y corté todo excepto la última letra del nombre de la clase devuelta, ya que la clase es algo así como ui-handle-s.

De hecho, es bastante gracioso ya que no terminé usando la mayor parte de esto, ya que lo cambié para cambiar el tamaño solo desde el fondo. Como no lo estoy usando, espero que alguien más lo encuentre útil.

Answer 6

JSONx tiene una buena solución, pero también se puede utilizar el built-in eventos:

$('#resizable').resizable({ 
    handles: 'n,s', 
    start: function(event, ui) { 
     var handleDirection = event.srcElement.className.split("-").pop(); 
    } 
}); 

El código hace que el elemento '#resizable' de tamaño variable y pone asas en los lados norte y sur del elemento . Si se hace clic y se arrastra en el controlador norte, handleDirection es 'n'. No he podido encontrar una forma similar de hacer esto con el evento 'detener'.

Answer 7

probar este código:

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

El div se cambia el tamaño en cuatro direcciones utilizando el maneja propiedad.

Échale un vistazo aquí:

http://www.landcoder.com/4-dynamic-interactive-code-snippets-jquery-705#resizable