Problemi col drag&drop

**rudyF** · 24-07-2015, 10:17

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>

**KillerWorm** · 24-07-2015, 18:21

Ciao.

Credo che a spostarli sia lo script anche se non capisco quale function lo fa.

Credi male, il problema sta nel CSS.

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é?

Cerco di spiegarti. Stai usando position:relative, per cui gli elementi si spostano in relazione alla loro posizione originale, cioè la posizione che occuperebbero nel normale flusso del documento.

I tre div normalmente verrebbero incolonnati uno sopra l'altro, per cui tutti hanno left:0, ma, per ciascuno di loro, il valore del proprio top è influenzato dallo spazio che viene occupato dai div che lo precedono.

La posizione originale del box rosso è quindi top:0, left:0, pertanto lo script funziona come ci si aspetta.
La posizione originale del box blu, invece, ha un valore del top di 120px, cioè lo spazio occupato dal box rosso (100px di altezza, più 10px del padding-top, più 10px del padding-bottom).
Analogamente, il box verde ha un top di 240px.

Dal momento che hai applicato position:relative, variando i valori di top e left, questi saranno semplicemente sommati ai valori originali, in altre parole, lo spostamento è "relativo" alla posizione iniziale

Puoi risolvere usando position:absolute anziché relative.

**rudyF** · 25-07-2015, 07:31

PERFETTO !!!

grazie

rudyF

Discussione: Problemi col drag&drop

Strumenti discussione

Ricerca discussione

Visualizza

Problemi col drag&drop

Permessi di invio