Buenas compañeros.
He creado un script para crear un recuadro arrastrando el mouse (compatibilizado con eventos touch) y el ancho y el alto de la caja lo designa el punto de inicio XY y el punto final al levantar el mouse o el dedo. Es tal que así :
Código Javascript
:
Ver original$('#container').on(TouchMouseEvent.MOVE, function(e){
if(self.holdCreateMask === true) {
e.preventDefault(); // prevención de selección de contenido
if(self.mask.click === true){
// si estamos haciendo click y arrastrando pintamos la caja
$('#maskSquare').css({
width: (e.pageX-offset.left) - self.mask.xCoord,
height: (e.pageY-offset.top) - self.mask.yCoord
});
}
}
});
¿Cuál es el problema? El problema es que si nos convertimos de repente en chinos, y en lugar de crearlo de izquierda a derecha y de arriba a abajo lo queremos hacer en otra dirección (derecha>izquierda, abajo>arriba y la combinación de ellos). Tendría que dejar correr unos píxeles para conocer la dirección y posicionar en el MOUSEDOWN como absolute right, bottom, left y/o top según se necesite.
Alguien tiene alguna idea de cómo hacer esto de forma eficaz sin efectos raros de creación, o evitar que tenga que eliminar la capa cuando se cambie la dirección y volver a insertarla?
Gracias y un saludo.