Tenho 3 objetos do tipo SVG rect. Quero move-los com o rato. O problema é que so consigo mover quando crio o objeto dinamicamente no codigo JavaScript. Se crio no HTML dentro do SVG, não consigo mover. Exemplo:
1 Resposta
O teu código só está a adicionar um event handler ao elemento circle
, tens de adaptar para os elementos rect
também.
Podes fazer isso assim:
var rects = document.querySelectorAll('rect');
for (var i = 0; i < rects.length; i++) {
rects[i].addEventListener('mousedown', mousedown);
}
shape.addEventListener('mousedown', mousedown);
(ou podias usar delegação como no exemplo no final da resposta)
Depois tens de resolver outro problema, as cooredenadas. No setter e no getter uma vez que elementos rect
tem x
e y
, mas elementos circle
têm cx
e cy
.
Aqui fica uma sugestão:
function mousedown(evt) {
var evt = evt || window.event;
ddData.element = this;
ddData.initialX = evt.clientX;
ddData.initialY = evt.clientY;
ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'x' : 'cx'));
ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'y' : "cy"));
};
svg.onmousemove = function (evt) {
var evt = evt || window.event;
var el = ddData.element;
if (el) {
var posX = ddData.originalX + evt.clientX - ddData.initialX;
var posY = ddData.originalY + evt.clientY - ddData.initialY;
if (el.tagName == 'rect') {
//move object
el.setAttributeNS(null, "x", posX);
el.setAttributeNS(null, "y", posY);
} else {
el.setAttributeNS(null, "cx", posX);
el.setAttributeNS(null, "cy", posY);
}
}
}
jsFiddle: http://jsfiddle.net/y2d5og5s/
Podes mesmo fazer isto com delegação (via event.target
) e assim nem precisas do ciclo for
. Neste exemplo em baixo uso .id
para decidir se o elemento pode ser movido ou não (assumindo que elementos com ID podem ser movidos), mas podias fazer isso com uma classe ou data-
field.
jsFiddle: http://jsfiddle.net/g50L96e7/
-
Obrigado. Isso move todos os objetos svg, até o fundo que também são rect. Como posso limitar isso? So mover os pequenos rect.– akmCommented 11/03/2015 às 17:22
-
@akm tens várias opções, vou juntar exemplo daqui a uma hora quando estiver no computador de novo. Mas podes adicionar classe e verificar isso, ou um data- field, ou limitar o for para i = 2.– SergioCommented 11/03/2015 às 17:26
-
@akm: jsfiddle.net/g50L96e7 - mudei mais um pouco, usando delegação. Assim não precisas do ciclo for.– SergioCommented 11/03/2015 às 18:57
-
Estou tentando obter as coordenadas do objecto, quando é mudado de posição com o var x = this.getAttributeNS(null, "x"); mas o valor me da null. Exemplo: jsfiddle.net/g50L96e7/1– akmCommented 11/03/2015 às 20:26
-
@akm isso é porque o
this
nesse handler é osvg
, tens de usarevent.target
-> jsfiddle.net/g50L96e7/2– SergioCommented 11/03/2015 às 20:33