Mootools Add click event with Drag.Cart

Question

I use this example under jsfiddle.net, to build a drag&drop system and if I create a click event on shirts images (draggables), this event doesn't work.

How to combine drag and click events to the draggables elements with Mootools?

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

    $$('.item').addEvent('mousedown', function(event){
        //event.stop();

        // `this` refers to the element with the .item class
        var shirt = this;

        var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
            opacity: 0.7,
            position: 'absolute'
        }).inject(document.body);

        var drag = new Drag.Move(clone, {

            droppables: $('cart'),

            onDrop: function(dragging, cart){

                dragging.destroy();

                if (cart != null){
                    shirt.clone().inject(cart);
                    cart.highlight('#7389AE', '#FFF');
                }
            },
            onEnter: function(dragging, cart){
                cart.tween('background-color', '#98B5C1');
            },
            onLeave: function(dragging, cart){
                cart.tween('background-color', '#FFF');
            },
            onCancel: function(dragging){
                dragging.destroy();
            }
        });
        drag.start(event);
    });

    // This doesn't work
    $$('.item').addEvent('click', function(event){
        console.log('click');
    });

});

Answer 1

the event.stop(); will preventDefault and stopPropagation so the mousedown won't bubble into click.

furthermore, it clones and applies stuff to a new element and somewheere along the lines, mootools-more will stop the event once again.

so replace the event.stop with this.fireEvent('click', event); to bubble it up manually - though strictly speaking, a click is on mouseup and you kind of need to wait for that instead.

http://jsfiddle.net/dimitar/qsjj1jpe/4/