Foros del Web » Programando para Internet » Jquery »

Mover div y svg con jquery

Estas en el tema de Mover div y svg con jquery en el foro de Jquery en Foros del Web. Hola amigos, estoy tratando de hacer un pequeño editor con svg en el que tengo que mover elementos dentro de la etiqueta svg de html. ...
  #1 (permalink)  
Antiguo 02/05/2013, 07:23
 
Fecha de Ingreso: octubre-2006
Mensajes: 123
Antigüedad: 17 años, 5 meses
Puntos: 1
Mover div y svg con jquery

Hola amigos,

estoy tratando de hacer un pequeño editor con svg en el que tengo que mover elementos dentro de la etiqueta svg de html.

He realizado un ejemplo para que podais probar.

En el ejemplo hay una capa div normal y corriente que se puede mover por la pantalla sin problemas.

El problema esta cuando intento mover varias veces el elemento svg que a veces a la segunda o tercera vez que se quiere mover en Firefox se bloquea y no me deja moverlo

Nose si puede ser problema de los eventos o de que, pero si sabeis cual puede ser el problema agradeceria una respuesta.

En chrome y opera funciona perfectamente.

Como podeis ver el codigo es equivalente tanto en el div como en el elemento svg, el tema es que en firefox el elemento svg no se mueve correctamente en alguna ocasion

Alguna idea?

Código PHP:
<!DOCTYPE html>
<
html>
<
head>

<
title>Editor</title>

<
script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
.move {
    cursor: move;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    margin-top: 20px;
    margin-left: 50px;
}

body {
    margin: 0px;
}
</style>


<script>
    var dragging, x0, y0;
    var draggingSVG, x0SVG, y0SVG;

    $(document).ready(function() {
        //mover div normal
        $("#toMove").mousedown(function(event) {
            dragging = true;
            x0 = event.pageX;
            y0 = event.pageY;
        });
        $("#toMove").mousemove(function(event) {
            if (dragging === true) {
                $(this).offset({
                    left : $(this).offset().left + event.pageX - x0,
                    top : $(this).offset().top + event.pageY - y0
                });
                x0 = event.pageX;
                y0 = event.pageY;
            }
        });
        $("#toMove").mouseup(function(event) {
            dragging = false;
        });
        $("#toMove").mouseout(function(event) {
            dragging = false;
        });

        //mover svg
        $("#rectSVG").mousedown(function(event) {
            draggingSVG = true;
            x0SVG = event.pageX;
            y0SVG = event.pageY;
        });
        $("#rectSVG").mousemove(function(event) {
            if (draggingSVG === true) {
                $(this).attr({
                    x : Number($(this).attr('x')) + event.pageX - x0SVG,
                    y : Number($(this).attr('y')) + event.pageY - y0SVG
                });
                x0SVG = event.pageX;
                y0SVG = event.pageY;
            }
        });
        $("#rectSVG").mouseup(function(event) {
            draggingSVG = false;
        });
        $("#rectSVG").mouseout(function(event) {
            draggingSVG = false;
        });
    })
</script>

</head>


<body>
    <div id="toMove" class="move"></div>

    <svg style="border: 1px solid #000;" version="1.1" width="800"
        height="400">
        <rect style="cursor: move;" id="rectSVG" x="333" y="120" width="245"
            height="154" fill="#F00" stroke="#000" />
        </svg>
</body>


</html> 

Última edición por canariozgz; 02/05/2013 a las 07:24 Razón: aclarar problema
  #2 (permalink)  
Antiguo 03/05/2013, 04:56
Avatar de hasdpk  
Fecha de Ingreso: agosto-2011
Ubicación: $spain->city( 'Arucas' );
Mensajes: 1.800
Antigüedad: 12 años, 6 meses
Puntos: 297
Respuesta: Mover div y svg con jquery

¿Y en Internet Explorer y Safari? ¿Que versión de Firefox estás usando?
__________________
Freelance Developer — www.rubenmartin.me PHP, SQL, Wordpress, Prestashop, Codeigniter, Laravel
RegaloConsolas — www.regaloconsolas.com Sorteo juegos, consolas y accesorios

Etiquetas: svg
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 15:59.