Preventing JavaScript click event with Scriptaculous drag and drop

Question

I have some elements on a page which are draggable. These same elements have a click event which navigates to another page. I'm trying to determine the best way of preventing the click event from firing if the user is dragging but still allow the click event if not dragging. Anyone have any ideas of the best way to accomplish this?

Paleography

Answer 1

I solved this by using something like the following:

new Draggable('id', {
    onStart: function() {
        dPhoto = $('id');
        Event.stopObserving('id', 'click');
    },
    onEnd : function() {
        setTimeout("Event.observe('id', 'click', function() { location.href = 'url'; });", 500);
    },
    revert: true
});

Paleography

Could you actually save the click event to reattach again afterwards? – Furthermore

Answer 2

var click_func;
function onDragStart(drgObj,mouseEvent){
    click_func = mouseEvent.target.onclick;

    mouseEvent.target.onclick = function(e){
        mouseEvent.target.onclick = click_func;
        return false;
    }
}

Vittoria

Answer 3

Something like the following might do the trick (and prevent the click event to be fired up)

new Draggable('tag',  
    {
        revert:function()
        {
            $('tag').onclick = function(){return false;};
            setTimeout('$(\'tag\').onclick = function(){return true;}','500');  
            return true;
        }
    }
);

Platter

Thanks, but this didn't quite work. It prevents the click event from happening even after the timeout. Seems like there should be a cleaner solution. – Paleography

Answer 4

You can also do this another way. On your startDrag you stop observing the object. Then you observe the click again which leads to an enddrag function which recreates the first eventhandler.

function onDragStart() {
    Event.stopObserving(this.OBJECT,'click');
    Event.observe(this.OBJECT,'click',this.onDragEnd.bindAsEventListener(this));
}

function onDragEnd() {
    Event.stopObserving(this.OBJECT,'click');
    Event.observe(this.OBJECT,'click',this.PREVIOUSFUNCTION.bindAsEventListener(this));
}

This will catch the leftover click event which is still active after the enddrag to just recreate the original handler. I hope this helps somebody out there :)

Wheelman