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
Rispondi quotando
