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 drag one logo to the inheriting spot on the t-shirt and if they chose to drag another logo to the inheriting spot it will just replace the logo already existing on the t-shirt. here is the code, any help would be appreciated.
Code:
<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>