jQuery UI - How do I distinguish between a drag/resize start event and a click event?
<p>I have 3 separate blocks of code that I want to execute.</p>

<p>One is to be executed when the user starts dragging the element (I know how to do that using the draggable start event)</p>

<p>The other one is for when the user starts resizing the element (I know how to do that as well using the resizable start event)</p>

<p>And the third one is for when the user simply clicks on the element (without the intention of either dragging it or resizing it). How do I detect that ?</p>

<p>Does jQuery UI offer a standard way for doing this or is this good enough : </p>

<pre><code>$el.resizable({
    start: function ()
    {
        $(this).addClass('animating');
    },
    stop: function (event,ui)
    {
         $(this).removeClass('animating');
    }
}).draggable({
    start: function ()
    {
        $(this).addClass('animating');
    },
    stop: function ()
    {
        $(this).removeClass('animating');
    }
}).click(function ()
   {
        var $this = $(this);
        setTimeout(function ()
        {
            if (!$this.hasClass('animating'))
            {
               console.log('simple click!');
            }
        }, 500);
    });
</code></pre>

<p>The above isn't very reliable actually, as my click event seems to also fire when a drag action stops (since a click event is registered on mouseup...)</p>