Jquery - How to run a function onclick only if link is not dragged?

Question

I am running thickbox and jquery ui draggable both on the same page, and they are conflicting.

Jquery UI Draggable allows me to drag and drop things from one place to another with this code:

$(".droppable").droppable({  
      drop: function(ev, ui) {  
             do stuff  
}  
});

Thickbox starts on a click event, with essentially this code:

$(".thickbox").click(function(){  
thickbox functions...  
});

But because the thickbox link is inside the draggable div, it opens the thickbox when I drag the link!! Hence, the problem.

How can I change this code so that:

1. When I drag the link, it doesn't open thickbox.
2. When I click the link(without dragging), it opens thickbox.

Thanks!

Answer 1

Check if the element is being dragged before showing thickbox. or disable thickbox event handler when dragged.

eg:

$(".thickbox").mouseup(function(){  
    if (is_being_dragged()) return;
    // thickbox functions...  
});

is_being_dragged() would have to check a flag set by the drag function. The drag function should unset the drag flag after it has completed.

You can also solve this independently of the drag function you're using by making the click function be a onmousedown, followed by onmouseup.

$(".thickbox").mousedown(function(){  
   this.__down = new Date().getTime(); 
});

$(".thickbox").mouseup(function(){  
   var interval = new Date().getTime() - this.__down; 
   // assume dragged if it was pressed 50 millisecs or more ago
   if (interval > 50) { return }
});

It is assuming a drag takes more then 50 millisecs and a click is less. You can see what works best in your case.