Tenho dois objetos circle
, que consigo mover com o rato. Queria uma linha entre os dois círculos, que sempre que move se um, a linha esteja sempre colada.
O codigo que tenho para mover os objetos:
var dragged = null; //L'élément en cours de drag
function start_drag(objet,event)
{
dragged = objet;
if( event.preventDefault ) event.preventDefault();
}
function drag_onmousemove(event) //Lorsque la souris se déplace
{
if( dragged )
{
x = event.clientX;
y = event.clientY;
elementHeight = dragged.clientHeight; //hauteur du obj
elementWidth = dragged.clientWidth;
dragged.style.position = 'absolute';
dragged.style.left = x - elementWidth/2 + 'px'; //divise longueur par 2 pour le milieu
dragged.style.top = y - elementHeight/2 + 'px';
}
}
function drag_onmouseup(event)
{
dragged = null;
}
function addEvent(obj,event,fct)
{
if( obj.attachEvent)
obj.attachEvent('on' + event,fct);
else
obj.addEventListener(event,fct,true);
}
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);
<div id="divcircle" onmousedown="start_drag(document.getElementById('divcircle'), event);" style="position:absolute; height:50px; width:50px;">
<svg id="svg">
<circle cx="50" cy="50" r="5" stroke="black" stroke-width="3" fill="green" />
</svg>
</div>
<div id="divcircle2" onmousedown="start_drag(document.getElementById('divcircle2'), event);" style="position:absolute; height:50px; width:50px;">
<svg id="svg">
<circle cx="40" cy="40" r="5" stroke="black" stroke-width="3" fill="green" />
</svg>
</div>