[DOM] problema gestione eventi del mouse

**olwen** · 18-01-2009, 17:21

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>

**olwen** · 18-01-2009, 17:23

Ah, dimenticavo, ho testato lo script sia su Firefox 3.0.5 che su IE 6...

**olwen** · 20-01-2009, 11:14

Nessuno mi sa dire neanche se la struttura è ragionevole o no?

**Noot** · 29-01-2010, 13:58

Ciao, anche io sto facendo la stessa cosa. Sto cercando di sfruttare il DOM per simulare il drag e drop del mouse. Ho scritto questo codice, che funziona ma non riesco a limitare l'area di trascinamento del mouse, cioè una volta selezionato l'oggetto vorrei che l'oggetto si potesse trascinare solo nel <div> che dico io. Vi posto il codice:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Javascript DOM Drag &amp; Drop</title>

<style><!--

.dragclass {

    position:absolute;

    top:0;

    left:0;

    width:12.5em;

    cursor : move;

    border:1px solid #ff00ff;

    background-color:#ffeedd;

    color:#000000;

}

#container {

    position:absolute;

    top:30px;

    left:30px;

    width:25em;

    height:25em;

    border:1px solid #000000;

}

--></style>

<script type="text/javascript"><!--



if  (document.getElementById){

var container,maxX,maxY;

var n = 0;

var dragok = false;

var y,x,d,dy,dx;



function move(e) {

    if (!e) e = window.event;

    if (dragok){

        d.style.left = dx + e.clientX - x + "px";

        d.style.top  = dy + e.clientY - y + "px";

        return false;

    }

}



function down(e) {

    if (!e) e = window.event;

    var temp = (typeof e.target != "undefined")?e.target:e.srcElement;

    if (temp.className == "dragclass"){

        container = document.getElementById("container");

        dragok = true;

        temp.style.zIndex = n++;

        d = temp;

        dx = parseInt(temp.style.left+0);

        dy = parseInt(temp.style.top+0);

        x = e.clientX;

        y = e.clientY;

        maxX=container.offsetLeft + container.offsetWidth;

        maxY=container.offsetTop + container.offsetHeight;

        document.onmousemove = move;

        return false;

        }

}



function up(){

dragok = false;

document.onmousemove = null;

}



document.onmousedown = down;

document.onmouseup = up;



}

//End.

//--></script>

</head>



<body>

<div id="container">

<div class="dragclass">

[url="http://www.3anniepoi.it/"]Hello World![/url]

</div>

</div>

</body>

</html>

Vorrei un suggerimento.
Grazie
Noot

Discussione: [DOM] problema gestione eventi del mouse

Strumenti discussione

Ricerca discussione

Visualizza

[DOM] problema gestione eventi del mouse

dom gestione eventi mouse

Permessi di invio