3

No meu código JavaScript, utilizando o rato movo um rectangulo SVG de um lado para o outro. O meu problema é que quando clico no objeto, a posição do rato não fica fixa no meio objeto mas sim no canto superior direito e bem fora do objeto. Como posso posicionar o rato no meio do objeto?

Meu código HTML:

<div id="divrect" onmousedown="start_drag(document.getElementById('divrect'), event);" style="position:absolute;" style="height:0px;"> 
        <svg  width="150" height="150"> 
            <rect id="rect" x="5" y="25" width="150" height="150" stroke="#0E0E0E" style="fill:red; stroke-width:1" />
             <text id =txtrect x="5" y="35" font-family="Verdana" font-size="11" fill="white" >
                Rect1
             </text>
        </svg> 
    </div>  

E meu código JavaScript:

function start_drag(objet,event)
    {
        dragged = objet; 

        if( event.preventDefault ) event.preventDefault();
    }

    function drag_onmousemove(event)  
    {
      if( dragged ) 
      {
        x = event.clientX;
        y = event.clientY;
        dragged.style.position = 'absolute';
        dragged.style.left = x + 'px';
        dragged.style.top = y + 'px';
    }   
1
  • A pergunta ficaria legal com um StackFiddle demonstrativo :)
    – brasofilo
    Commented 19/10/2014 às 17:39

1 Resposta 1

1

Bem, você pode pegar a altura e largura do objeto svg, dividir por 2 e subtrair do seu X e Y. Isto resultará no seu objeto localizado ao meio do ponteiro do mouse. Seu código JavaScript ficaria assim:

function start_drag(objet,event) { 
    dragged = objet;
    if( event.preventDefault ) event.preventDefault();
}

function drag_onmousemove(event)  
{
    if( dragged ) 
    {
        x = event.clientX;
        y = event.clientY;
        elementHeight = dragged.clientHeight;
        elementWidth = dragged.clientWidth;
        dragged.style.position = 'absolute';
        dragged.style.left = x - elementWidth/2 + 'px';
        dragged.style.top = y - elementHeight/2 + 'px';
    }
}

A lógica é que ao dividir pela metade o valor do comprimento e da altura você obterá os pontos médios da sua figura. Então, ao subtrair os pontos médios dos pontos da posição atual do mouse, você terá como resultado os pontos centrais da sua figura em relação a posição do mouse.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .