Segnaposto

Trascina qui l'immagine.

Oppure trascinala qui.

Ecco tutto il codice necessario per questo esempio:

HTML

<div id="origine" ondragover="DragOver(event)" ondrop="Drop(event)">Segnaposto
		<img src="../photos/ciliege.jpg" draggable="true" id="ciliege" ondragstart="iniziaDrag(event)" width="150px"/></div>
		
<div id="bersaglio"  ondragover="DragOver(event)" ondrop="Drop(event)">Trascina qui l'immagine.</div>

<div id="bersaglio2" ondragover="DragOver(event)" ondrop="Drop(event)"> Oppure trascinala qui.</div>

CSS

#origine {
	width:200px;
	height:200px;
	position:relative;
	border:thin solid black;
	background-color:#af3;
	float:left;
}

#bersaglio {
	width:270px;
	height:307px;
	border:thin solid black;
	background-color:#ff3;
	position:relative;
	float:left;
}

#bersaglio2 {
	width:270px;
	height:307px;
	border:thin solid black;
	background-color:#cf3;
	position:relative;
	float:left;
}

img {
	cursor:move;
	padding:10px;
}

JS

  
      var immagine;
      /*La variabile immagine è destinata a contenere l'elemento da trascinare. 
     Viene caricata dal metodo event.target.getAttribute("id") nella funzione
     iniziaDrag(event) che gestisce l'evento ondragstart.
     event.target.getAttribute("id") funziona così:
     1 - event viene passato alla funzione iniziaDrag(event) dall'evento ondragstart. Ovvero quando
         l'utente preme il tasto sinistro del mouse su un elemento "draggabile" ed inizia il trascinamento. 
     2 - target è l'oggetto bersaglio dell'evento. In questo caso l'elemento <img> che l'utente
         sta trascinando.
     3 - getAttribute("id") significa che, dell'elemento target, viene preso l'attributo "id": la stringa "ciliegie".*/
      var bersaglio;
      /*bersaglio è l'elemento su cui sono trascinate le ciliegie. E' un oggetto che intercetta due
      eventi: ondragover quando qualche cosa viene trascinata sopra di esso, e 
      ondrop, quando l'oggetto trascinato viene rilasciato.
      L'evento ondragover è gestito dalla funzione DragOver(event) dove event contiene le informazioni
      relative all'elemento su cui viene trascinato l'oggetto. In questo caso l'elemento  <div> con id="bersaglio"  
      Il metodo event.preventDefault() disabilita il comportamento di default predefinito per l'evento
      ondragover. La domanda è: qual'è il comportamento predefinito per l'evento dragover?
      Altra domanda quante volte viene innescato l'avento dragover?
      Provo a memorizzare questa informazione nella variabile conta.*/
      var conta=0;
      /*La variabile conta è inizializzata a zero al momento della visualizzazione/caricamento della
      pagina e ne viene visualizzato il valore al momento del rilascio dell'immagine nel contenitore 
      bersaglio.*/	  
      function iniziaDrag(event){
          immagine=event.target.getAttribute("id");
      }
      function DragOver(event){
         event.preventDefault();
         conta=conta+1;
       }
      /*La funzione Drop(event) viene eseguita per gestire l'evento ondrop.
      Il target di event è l'elemento su cui gestire l'evento ondrop ovvero il bersaglio.*/
      function Drop(event){
         alert(conta);
         //l'istruzione che segue cancella la scritta: "Trascina qui l'immagine."
         event.target.innerHTML="";
         //l'istruzione che segue inserisce in bersaglio l'immagine.
         event.target.appendChild(document.getElementById(immagine));
         //l'istruzione che segue rende l'immagine delle ciliegie draggable
         document.getElementById(immagine).draggable=true;
         //l'istruzione che segue annulla il comportamento di default dell'evento
         event.preventDefault();
         //l'istruzione che segue arresta la propagazione dell'evento.
         event.stopPropagation();
         return false;
      }