Evitando clicks durante o drag

Evitando clicks durante o drag

HTML

<div id="principal">
    <div class="item">
        <a href="http://forum.imasters.com.br">link</a>
    </div>
    <div class="item">
        <a href="http://forum.imasters.com.br">link</a>
    </div>
</div>

CSS

#principal{
    border: 1px solid #CCC;
    padding:10px;
    width: 50%;
    min-height: 150px;
    height:auto;
    overflow:hidden;
    margin:2px;
}

.item {
    float:left;
    border: 1px solid #CCC;
    padding:10px;
    min-height: 30px;
    width:30px;
    height:auto;
    overflow:hidden;
    margin:2px;
}

JavaScript

var content = $('#principal');
content.draggable({
    start: function( event, ui ) {
        $('a').each(function () {
            var desabilitado = {
                'text-decoration':'none',
                'color':'#CCC'
            }
            $(this).prop('disabled','disabled').css(desabilitado);
        })
    },
    stop: function( event, ui ) {
        $('a').each(function () {
            var habilitado = {
                'text-decoration':'',
                'color':'#000'
            }
            $(this).prop('disabled','').css(habilitado);
        })
    }
})

$('.item').on('click', function(){
 alert('aa');
})