Usando jQuery, a configuração Draggable em um elemento evita que o desfoque seja disparado quando você clica no elemento arrastável
Usando jQuery, quando você define um evento de desfoque em uma caixa de texto e define outro elemento como arrastável, quando você clica no elemento arrastável, o evento de desfoque não é disparado no FireFox. IE é um pouco melhor, você obtém o evento blur, mas não obtém o evento click no elemento draggable.
Se você não especificar o cancelamento: "" no construtor arrastável, o objeto blur será disparado, mas o elemento que você deseja arrastar não será arrastável.
jQuery v1.3.2 jQuery UI v1.7.2
As linhas console.log são para o plug-in FireBug do FireFox.
<HTML>
<HEAD>
<TITLE>Blur/Click Workbench</TITLE>
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/ui/ui.core.js" type="text/javascript"></script>
<script src="js/ui/ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
function blurring() {
console.log('1 - blurring - ' + $( this ).attr('id'));
}
function clicking() {
console.log('2 - clicking - ' + $( this ).attr('id'));
}
$(document).ready(function() {
$( ".draggableTool" ).draggable( { cancel: "" } );
$( '.property' ).blur( blurring );
$( '#labelContainer' ).click( clicking );
});
</script>
</HEAD>
<BODY>
<input type='text' class='property' id='tb1' />
<br />
<input type='text' class='property' id='tb2' />
<br />
<label class='draggableTool' id='labelContainer' style='height:20px;position:absolute;'>
<textarea id='taLabel' style='height:100%;background-color:white;border:1px solid grey;'>Label</textarea>
</label>
</BODY>
</HTML>