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
