views:

1719

answers:

4

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?

A: 

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;
        }
    }
);
VonC
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.
digitalsanctum
I agree. I was worth a shot.
VonC
+1  A: 

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
});
digitalsanctum
Could you actually save the click event to reattach again afterwards?
mercutio
A: 
var click_func;
function onDragStart(drgObj,mouseEvent){
    click_func = mouseEvent.target.onclick;

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

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 :)

Stanley85