[SOLUCIONADO] Creación de divs mediante offset hacia cualquier dirección

[CHuLoSoY]

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:

$('#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.

[CHuLoSoY]

Por cierto, la creación es tal que así:

Código Javascript:

var maskDiv = $('<div/>').attr({
     'id':'maskSquare',
     'class':'mask-square'
}).css({
     'left':self.mask.xCoord,
     'top':self.mask.yCoord
})
 

es decir, al tener touchstart o mousedown creo el elemento y lo posiciono absoluto con left y top donde corresponde según el ratón.

[marlanga]

No le he dedicado mas de 5 minutos, se puede pulir más. Meter eventos touch corre de tu cuenta.
http://jsfiddle.net/9fbpu/

[CHuLoSoY]

Qué bueno! Si es que no se me había ocurrido las funciones del Math().

Mil gracias! Lo estoy puliendo un poco pero lo doy por solucionado.