jQuery: trash effect

We want to implement the effect of a trash where you can drag and drop your items and then empty the trash. Further, we also want to add two sounds, one when the item is dropped into the trash and another one when the trash is emptied. Difficult? Absolutely not! All we need is jQuery UI drag and drop features and the HTML5 audio interface. Let's see the details.

We start with the following markup:

<p><a href="#" id="empty">Empty</a></p>

<audio controls="controls" id="move-sound">
  <source src="jquery-trash-effect/move.mp3" type="audio/mpeg" />
  <source src="jquery-trash-effect/move.ogv" type="audio/ogg" />
</audio>

<audio controls="controls" id="empty-sound">
  <source src="jquery-trash-effect/empty.mp3" type="audio/mpeg" />
  <source src="jquery-trash-effect/empty.ogv" type="audio/ogg" />
</audio>

<div id="container">
  <div id="draggable">Test</div>
  <div id="droppable"></div>
</div>

In our CSS, all we have to do is to provide an alternate class for our trash (here is droppable) and hide the audio controls:

#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(jquery-trash-effect/empty.png) no-repeat;
 float: right;
}

#container div.full {
 background: url(jquery-trash-effect/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 #1px solid #a40;
 border-radius: 10px;
}

#move-sound, #empty-sound {

  width: 1px;
  height: 1px;
  position: absolute;
  top: -1000em;
  overflow: hidden;


}

Now with jQuery we have to add an action when the dragging starts and another action when the dragging ends:

$('#draggable').draggable({
 
   start: function() {
   
     $(this).animate({opacity: '0.5'}, 1000);
   
   },
   
   stop: function() {
   
     $(this).animate({opacity: '1'}, 1000).hide();
   
   }
   
});

The final action is to hide the draggable element. Then we have to add another action when the item is dropped:

$('#droppable').droppable({
   drop: function() {
     $(this).addClass('full');
     $('#move-sound')[0].play();
   }
});

We've simply changed the background image of the trash and played the move sound. Now we have to empty the trash:

$('#empty').click(function(event) {
 
   if($('#droppable').hasClass('full')) {
 
       $('#droppable').removeClass('full').prev().remove();
       $('#empty-sound')[0].play();
   
   
   }
 
   event.preventDefault();
 
});

With this action we've restored the original background image and removed the dropped item from the DOM. Further, we've also make the empty sound play. You can see the demo below.

Demo

Live demo