Implementare l'effetto di un cestino che si riempie e che si svuota e abbinare dei suoni a queste due azioni richiede solo la conoscenza degli effetti di drag and drop di jQuery UI e dell'interfaccia audio di HTML5. In particolare useremo i metodi/wrapper draggable() e droppable() di jQuery UI e il metodo play() associato all'elemento audio di HTML5. A livello grafico useremo due immagini di sfondo prese dalla GUI di Mac OS X. Anche i suoni sono presi da questo sistema operativo.
La marcatura è la seguente:
<p><a href="#" id="empty">Vuota</a></p>
<audio controls="controls" id="move-sound">
<source src="move.mp3" type="audio/mpeg" />
<source src="move.ogv" type="audio/ogg" />
</audio>
<audio controls="controls" id="empty-sound">
<source src="empty.mp3" type="audio/mpeg" />
<source src="empty.ogv" type="audio/ogg" />
</audio>
<div id="container">
<div id="draggable">Test</div>
<div id="droppable"></div>
</div>
Prima della chiusura dell'elemento body andiamo ad inserire jQuery e jQuery UI:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
</body>
Il codice JavaScript per questo esempio verrà dopo jQuery e jQuery UI.
Con i CSS abbiamo bisogno di nascondere i due elementi audio e di creare una classe che verrà aggiunta quando l'elemento draggable verrà rilasciato sul cestino (ultima e terz'ultima regola, rispettivamente):
#container {
width: 500px;
height: 128px;
}
#draggable {
width: 128px;
height: 128px;
background: #d40;
color: #fff;
line-height: 128px;
text-align: center;
float: left;
}
#droppable {
width: 128px;
height: 128px;
background: url(empty.png) no-repeat;
float: right;
}
#container div.full {
background: url(full.png) no-repeat;
}
#empty {
padding: 0.5em;
background: #d60;
color: #fff;
font-weight: bold;
font-size: small;
font-family: Arial, sans-serif;
text-decoration: none;
border: 1px solid #a40;
border-radius: 10px;
}
#move-sound, #empty-sound {
width: 1px;
height: 1px;
position: absolute;
top: -1000em;
overflow: hidden;
}
Per prima cosa dobbiamo implementare l'azione di trascinamento associando un'azione all'inizio e alla fine di questo evento:
$('#draggable').draggable({
start: function() {
$(this).animate({opacity: '0.5'}, 1000);
},
stop: function() {
$(this).animate({opacity: '1'}, 1000).hide();
}
});
L'elemento trascinato viene dapprima reso semitrasparente e quindi nascosto dopo aver ripristinato la sua opacità. Si noti come l'elemento non venga ancora rimosso dal DOM in questa fase.
Quando l'elemento viene rilasciato sul cestino, dobbiamo modificare l'immagine di sfondo del cestino e attivare il suono associato a tale movimento:
$('#droppable').droppable({
drop: function() {
$(this).addClass('full');
$('#move-sound')[0].play();
}
});
Viene aggiunta la classe full al cestino. Quindi, usando un riferimento all'elemento DOM con ID move-sound, viene attivato il suono corrispondente. La sintassi da usare è $(elemento)[0], poichè abbiamo bisogno di usare un metodo presente nel DOM ma non nel namespace di jQuery.
Infine, dobbiamo associare un evento click al link per svuotare il cestino:
$('#empty').click(function(event) {
if($('#droppable').hasClass('full')) {
$('#droppable').removeClass('full').prev().remove();
$('#empty-sound')[0].play();
}
event.preventDefault();
});
Verifichiamo se effettivamente il cestino è pieno tramite il metodo hasClass(). Se lo è, rimuoviamo la classe full unitamente all'elemento trascinato. Quindi attiviamo il suono corrispondente per questa azione.
Potete visionare l'esempio finale in questa pagina.