Ciao
Ho tre programmi (in VBSript) che usano il drag & drop
Devo riscriverli in Javascript ma ci sono delle istruzioni che non so tradurre e allora ho cercato in rete degli esempi di drag & drop in javascript. Ne ho trovati tanti e alla fine uno di questi mi sembrava il più semplice e adatto ai miei bisogni. Si tratta di un rettangolo colorato che si sposta col mouse, ma nei miei programmi le immagini da spostare sono di più, quindi ho inserito altri rettangoli in posizioni orizzontali diverse (left) e posizioni verticali uguali (top)
Ed ecco i problemi:
I tre rettangoli sono visualizzati in diverse posizioni left ma anche in diverse posizioni top.
Credo che a spostarli sia lo script anche se non capisco quale function lo fa.
Poi spostando i rettangoli col mouse il primo lo sposta regolarmente, il secondo, al primo accenno di movimento si abbassa di un centinaio di pixel e il terzo si abbassa molto di più.

Perché?
rudyF

Ecco il listato:

codice HTML:
<!DOCTYPE html>
  <html lang="it">
  <head>
  <meta charset="utf-8"> 
  <meta http-equiv="imagetoolbar" content="no">    
  <STYLE type="text/css">
  body {background:#CCEEFF;}
  .qdr{width:200px;           height:100px;    cursor:move; position:relative; padding:10px;}
  </STYLE>   
  <BODY onload="InizializzaMov()">            
  <DIV id="box1" class="qdr" style="left:50px; top:60px; z-index: 5; background-color: #ff0000;" onmousedown="MuoviOggetto(this);"></DIV>
  <DIV id="box2" class="qdr" style="left:450px; top:60px; z-index: 5; background-color: #0000ff;" onmousedown="MuoviOggetto(this);"></DIV>
  <DIV id="box3" class="qdr" style="left:850px; top:60px; z-index: 5; background-color: #00ff00;" onmousedown="MuoviOggetto(this);"></DIV>
   
  <SCRIPT type="text/javascript">
   
  oggetto = null;        //Inizializzo l'oggetto da spostare
  mouse_x = 0;          //Le due variabili che archiviano la posizione cursore mouse
  mouse_y = 0;
  ele_x = 0;           //Le due variabili che archiviano la posizione dell'elemento
  ele_y = 0;
   
  function InizializzaMov() {        //Collega le due funzioni muovi e ferma
   document.onmousemove = Muovi;
   document.onmouseup = Ferma;
  }
   
  function Ferma() {        //Distrugge l'oggetto quando siamo fermi
   oggetto = null;
  }
   
  function Muovi(e) {       //Funzione principale, che è responsabile dello spostamento dell'elemento
   mouse_x = document.all ? window.event.clientX : e.pageX;
   mouse_y = document.all ? window.event.clientY : e.pageY;
   if(oggetto != null) { 
      oggetto.style.left = (mouse_x - ele_x) + "px";
      oggetto.style.top = (mouse_y - ele_y) + "px";
   }
  }
   
  function MuoviOggetto(ele){      //Viene richiamata quando comincio a spostare l'oggetto
   oggetto = ele;                 //memorizzo i valori dell'elemento che deve essere spostato
   ele_x = mouse_x - oggetto.offsetLeft;
   ele_y = mouse_y - oggetto.offsetTop;
  }
  </SCRIPT>
  </BODY>
  </HTML>