I am creating a drag and drop section using MooTools and JavaScript, right now in this section all logos are draggable and droppable to the inheriting object (a t-shirt), Which means a user can drag as many logos to this object as he/she wishes. This is the problem, I wish to allow the user the ability to only chose one logo to place on the t-shirt and if they choose another logo it will just replace the logo already existing on the t-shirt. here is the code, any help would be appreciated.

<script type="text/javascript">

function changeColor(color) {
document.getElementById("right").style.backgroundImage = "url("+color+")";
}

window.addEvent('domready', function(){

var drop = $('cart');

var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,



$$('.item').each(function(item){



item.addEvent('mousedown', function(e) {

e = new Event(e).stop();



var clone = this.clone()

.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect

.setStyles({'opacity': 0.7, 'position': 'absolute'})

.addEvent('emptydrop', function() {

this.remove();

drop.removeEvents();

}).inject(document.body);





drop.addEvents({

'drop': function() {

drop.removeEvents();

clone.remove();

item.clone().inject(drop);

dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));








},

'over': function() {

dropFx.start('98B5C1');


},

'leave': function() {

dropFx.start('ffffff');




}

});



var drag = clone.makeDraggable({

droppables: [drop]





}); // this returns the dragged element



drag.start(e); // start the event manual



});



});



});



</script>