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>