Salve ragazzi, come potete vedere è il mio primo messaggio qua... Il sito html.it mi è stato molto utile per avvicinarmi a javascript, con il quale ho cominciato a manipolare il dom (è in assoluto il primo script javascript che creo, quindi vi prego di scusarmi se ho fatto errori banali).

Vi spiego il mio problema: devo creare un rettangolo che sia trascinabile su una pagina web.
Ho quindi pensato di caricare l'immagine di un rettangolo con dell'html e poi usare gli eventi onLoad (per aggiungere alcune proprietà, tra cui la posizione, al rettangolo) e gli eventi onMouseDown, onMouseMove e onMouseUp per implementare il drag&drop.

Quindi:
- in onMouseDown controllo se il cursore e sopra il rettangolo e in caso affermativo setto a true una variabile booleana
- in onMouseMove setto la posizione corrente del mouse e se la variabile booleana è vera cambio la posizione del rettangolo
- onMouseUp resetto la variabile booleana

Il problema è che se faccio mousedown sul rettangolo e poi muovo il mouse, il rettangolo si sposta di poco (direi una sola volta) e poi si ferma. Per sbloccare la situazione devo rilasciare il tasto del mouse (l'evento mouseUp non viene "preso") e a quel punto il rettangolo si sposta in modo corretto, però senza che nessun tasto del mouse sia premuto.
Per far terminare il movimento devo fare un click e a quel punto l'evento mouseUp viene sollevato e il drag termina...

Può darsi che non sia proprio il metodo migliore per fare una cosa del genere, però non mi pare neanche sbagliato e non ne sto venendo a capo...
Se avete idee suggerite pure, ve ne sarò grata.

Vi allego il codice, così se volete potete farvi un'idea più chiara:
codice:
<html>
<head>
<title>Prova rettangolo</title>
</head>
<body onLoad="load();">



[img]rettangolo.jpg[/img]

<script type="text/javascript">

var pressed = false;
var offsetX;
var offsetY;
var mozilla = document.getElementById&&!document.all;

function load()
{
   var n = document.getElementById('r');
   n.setAttribute('height','200');
   n.setAttribute('width','400');
   n.style.position='absolute';
   n.style.left='100';
   n.style.top='100';
}

function down()
{
   var n = document.getElementById('r');
   var leftX = parseInt(n.style.left);
   var leftY = parseInt(n.style.top);
   var rightX = leftX + 400;
   var rightY = leftY + 200;

   if (x>leftX && x<rightX && y>leftY && y<rightY)
   {
       pressed=true;
       offsetX = x - leftX;
       offsetY = y - leftY;
   }
}
     
function dragdrop()
{
      if(pressed)
      {
        var n = document.getElementById('r');
        n.style.left=x-offsetX;
        n.style.top=y-offsetY;
       }
}   
   
function up()
{
   pressed=false;
}

function PosizioneCursore(loc)
{
    if (mozilla)
    {
        x=loc.pageX;
        y=loc.pageY;
    }
    else
    {
        x=event.clientX;
        y=event.clientY;
    }
    dragdrop();
}

document.onmousemove = PosizioneCursore;
document.onmousedown = down;
document.onmouseup = up;


</script>

</body>
</html>