Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Problema al mover elemento con jquery

Estas en el tema de Problema al mover elemento con jquery en el foro de Jquery en Foros del Web. Hola amigos tengo un problema al mover un elemento con jQuery en Firefox. El emento es un rectangulo de svg, el que sea de svg ...
  #1 (permalink)  
Antiguo 01/05/2013, 12:01
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 1
Problema al mover elemento con jquery

Hola amigos tengo un problema al mover un elemento con jQuery en Firefox.

El emento es un rectangulo de svg, el que sea de svg es lo de menos, el problema creo que viene por los eventos de raton.

Al elemento que quiero mover, le he añadido el evento, onmousedown, onmouseover y onmouseup. Cuando se hace clic, guardo la posicion del raton, cuando se hace move voy actualizando la posicion del elemento y cuando se hace un mouseup actualizo unas cosas.

Todo funciona bien, el problema parece que alguna vez despues de terminar de mover el elemento y querer moverlo otra vez, el elemento no se mueve entonces hay que soltar el boton pulsado y volver a empezar, y en ese momento es cuando se descuadra el funcionamiento logico.

el codigo empleado es este

Código PHP:
<!DOCTYPE html>
<
html>
<
head>
<
title>Editor</title>

<
script src="jquery.js"></script>
<script src="jquery.svg.js"></script>

<style>
.svgdiv {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #3C8243;
}

.moveShape {
    cursor: move;
}
</style>

<script>
    var drawNodes = [];
    var sketchpad = null;
    var start = null;
    var outline = null;
    var offset = null;

    $(document).ready(
            function() {
                $('#canvasSVG').svg(
                        {
                            onLoad : function(svg) {
                                sketchpad = svg;
                                var surface = svg.rect(0, 0, '100%', '100%', {
                                    id : 'surface',
                                    fill : 'white'
                                });
                                $(surface).mousedown(startDrag).mousemove(
                                        dragging).mouseup(endDrag);
                                resetSize(svg, '100%', '100%');
                            }
                        });
            });

    function resetSize(svg, width, height) {
        svg.configure({
            width : width || $(svg._container).width(),
            height : height || $(svg._container).height()
        });
    }

    var drawNodes = [];
    var sketchpad = null;
    var start = null;
    var outline = null;
    var offset = null;
    var x0, y0 = null;
    var draggingShape = false;

    /* Remember where we started */
    function startDrag(event) {
        offset = ($.browser.msie ? {
            left : 0,
            top : 0
        } : $('#canvasSVG').offset());
        if (!$.browser.msie) {
            offset.left -= document.documentElement.scrollLeft
                    || document.body.scrollLeft;
            offset.top -= document.documentElement.scrollTop
                    || document.body.scrollTop;
        }
        start = {
            X : event.clientX - offset.left,
            Y : event.clientY - offset.top
        };
        event.preventDefault();
    }

    /* Provide feedback as we drag */
    function dragging(event) {
        if (!start) {
            return;
        }
        if (!outline) {
            outline = sketchpad.rect(0, 0, 0, 0, {
                fill : 'none',
                stroke : '#c0c0c0',
                strokeWidth : 1,
                strokeDashArray : '2,2'
            });
            $(outline).mouseup(endDrag);
        }
        sketchpad.change(outline, {
            x : Math.min(event.clientX - offset.left, start.X),
            y : Math.min(event.clientY - offset.top, start.Y),
            width : Math.abs(event.clientX - offset.left - start.X),
            height : Math.abs(event.clientY - offset.top - start.Y)
        });
        event.preventDefault();
    }

    /* Draw where we finish */
    function endDrag(event) {
        if (!start) {
            return;
        }
        $(outline).remove();
        outline = null;
        drawShape(start.X, start.Y, event.clientX - offset.left, event.clientY
                - offset.top);
        start = null;
        event.preventDefault();
    }

    /* Draw the selected element on the canvas */
    function drawShape(x1, y1, x2, y2) {
        var left = Math.min(x1, x2);
        var top = Math.min(y1, y2);
        var right = Math.max(x1, x2);
        var bottom = Math.max(y1, y2);
        var settings = {
            fill : '#FFF',
            stroke : '#000',
            strokeWidth : $('#swidth').val(),
            id : 'rect' + drawNodes.length,
            class : 'moveShape'
        };
        var shape = 'rect';
        var node = null;
        if (shape == 'rect') {
            node = sketchpad.rect(left, top, right - left, bottom - top,
                    settings);
        }
        drawNodes[drawNodes.length] = node;
        $(node).mousedown(startDragShape).mousemove(draggingShape).mouseup(endDragShape);
        $('#canvasSVG').focus();
    };

    function startDragShape(event) {
        x0 = event.pageX;
        y0 = event.pageY;
        draggingShape = true;
    }

    function endDragShape(event) {
        var transform = $(this).attr('transform');
        var matrix = transform.slice(10, -1).split(' ');
        $(this).attr({
            x : Number($(this).attr('x')) + Number(matrix[0]),
            y : Number($(this).attr('y')) + Number(matrix[1])
        });
        $(this).removeAttr('transform');
        draggingShape = false;
    }

    var draggingShape = function (event) {
        if (draggingShape === true) {
            var dx = event.pageX - x0;
            var dy = event.pageY - y0;
            $(this).attr({
                transform : 'translate(' + dx + ' ' + dy + ')'
            });
        }
    }
</script>
</head>

<body>
    Canvas de svg
    <input type="button" value="Insert rect" onclick="drawRect();">

    <div id="canvasSVG" class="svgdiv">
</body>

</html> 

en chrome funciona a la perfeccion, en firefox es donde esta el problema. hace falta la libreria de jquery y la jquery svg que se puede descargar desde aqui

http://keith-wood.name/svg.html

si alguien me hecha una mano lo agradeceria un monton

un saludo
  #2 (permalink)  
Antiguo 01/05/2013, 12:20
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 10 años, 4 meses
Puntos: 22
Respuesta: Problema al mover elemento con jquery

Me dice que drawRect no está definido.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #3 (permalink)  
Antiguo 01/05/2013, 12:54
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 1
Respuesta: Problema al mover elemento con jquery

tienes que importar la libreria jquery.svg.js

la tienes que descargar del enlace que he puesto al final de la pagina, nose como subir aqui un archivo sorry...

si ya lo has importado... borrar el boton que hay en el body que es el que llama a esa funcion, ya no sirve ese boton

Etiquetas: elemento
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:51.