Ciao
Devo spostare sei immagini sullo schermo e il drag&drop che sto usando si comporta in modo anomalo.
Se sposto dei tag <DIV> il drag funziona come vorrei, mentre se sposto i tag <IMG> le immagini si sdoppiano. Rilasciando il pulsante del mouse l’immagine torna una e rimane appiccicata al cursore.
I miei programmi sono destinati a bambini speciali ed è necessario che lo spostamento sia come quello dei DIV.
La spiegazione non è molto chiara quindi 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:hand; position:absolute;}
  .msgg {color:#000000; font-style:normal; font-size:28pt; font-weight:normal; font-family:Times new Roman, Arial, Verdana;}      
  </style>   
  <body id="Documento"> 
  <div id="box1" class="qdr" style="left:50px; top:60px; z-index: 2; background-color: #ff0000;" onmouseover="MausOver(1)"; onmousedown="MausDown(this);"></div>
  <div id="box2" class="qdr" style="left:450px; top:60px; z-index: 2; background-color: #0000ff;" onmouseover="MausOver(2)"; onmousedown="MausDown(this);"></div>
  <div id="box3" class="qdr" style="left:850px; top:60px; z-index: 2; background-color: #00ff00;" onmouseover="MausOver(3)"; onmousedown="MausDown(this);"></div>
   
  <img id="parte1" class="qdr" src="photo/foto1/f1.jpg" style="left:50px; top:300px;" z-index: 2; onmouseover="MausOver(4)"; onmousedown="MausDown(this);">
  <img id="parte2" class="qdr" src="photo/foto1/f2.jpg" style="left:450px; top:300px;" z-index: 2; onmouseover="MausOver(5)"; onmousedown="MausDown(this);" src="photo/foto1/f2.jpg">
  <img id="parte3" class="qdr" src="photo/foto1/f3.jpg" style="left:850px; top:300px;" z-index: 2; onmouseover="MausOver(6)"; onmousedown="MausDown(this);" src="photo/foto1/f3.jpg">
   
  <span id="Messaggio" class="msgg" style="width:810px; height:42px; position:absolute; left:223px; top:540px; z-index:2; background-color:#FF0000; text-align:center;"></span>               
   
  <script type="text/javascript">
   
  var oggetto = null;        //Inizializzo l'oggetto da spostare
  var mouseX = 0;            //Le due variabili che archiviano la posizione cursore mouse
  var mouseY = 0;
  var elementoX = 0;         //Le due variabili che archiviano la posizione dell'elemento
  var elementoY = 0;
  var psX = 0
  var psY = 0
  var posizX = new Array(6)
  var posizY = new Array(6)
  var figmossa = 0
   
  window.onload=function()  {  
  document.getElementById("Documento").focus();
  InizializzaMovimento()
  }; 
   
  function InizializzaMovimento() {        //Collega le due funzioni muovi e ferma
  document.onmousemove = Muovi;
  document.onmouseup = Ferma;
  }
   
  function Ferma() {          //Distrugge l'oggetto quando siamo fermi
   oggetto = null;
   posizX[figmossa] = psX     // Le coordinate dell'oggetto mosso
   posizY[figmossa] = psY
  }
   
  function Muovi(pg) {        // Stai muovendo il mouse
   mouseX = document.all ? window.event.clientX : pg.pageX;
   mouseY = document.all ? window.event.clientY : pg.pageY;
   if(oggetto != null) { 
     psX = mouseX - elementoX; 
     psY = mouseY - elementoY;
     oggetto.style.left = psX + "px";
     oggetto.style.top = psY + "px";
   }
  }
   
  function MausDown(ele) {      // Ho premuto il tasto sinistro del mouse
   oggetto = ele;          
   elementoX = mouseX - oggetto.offsetLeft;    // memorizzo la posizione dell'elemento che deve essere spostato
   elementoY = mouseY - oggetto.offsetTop;     // le iniziali di Left e Top devono essere maiuscole  
  }
   
  function MausOver(x) {
  figmossa = x
  Messaggio.innerHTML = "sto muovendo la figura " + figmossa
  }
   
  </script>
  </body>
  </html>



Ho provato a mettere le img dentro un div ma non cambia nulla
rudyF