Prevent `click` while the link is dragged

Question

I'm using gridster to make a grid of links. The link should work normal when click on it. Problem is it's also get clicked after dragged. How can I stop it from being clicked after dragged?

Please check: http://jsfiddle.net/b_m_h/tr4cU/

<div class="gridster">
    <ul id="reszable">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><a href="http://google.com" target="_blank">LINK</a></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    </ul>
</div>

Js:

$(function(){

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100]
    });

    var gridster = $(".gridster ul").gridster().data('gridster');

});

Answer 1

Don't know if there is something built in as jQuery draggable has options for this, but couldn't find anything similar for gridster.

You could always create the functionality yourself:

$(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [100, 100]
}).on({
    mousedown: function(e) {
        $(this).data({top: e.pageX, left: e.pageY});
    },
    mouseup: function(e) {
        var top   = e.pageX,
            left  = e.pageY,
            ptop  = $(this).data('top'),
            pleft = $(this).data('left');

        $(this).data('dragged', Math.abs(top - ptop) > 15 || Math.abs(left - pleft) > 15);
    },
    click: function(e) {
        if ( $(this).data('dragged') ) e.preventDefault();
    }
}, 'a');

FIDDLE