Setting Draggable on an element prevents blur from firing when you click the draggable element.
I have a span that I make draggable. I have some textboxes that blur
is set on. When you click/move from one textbox to another the blur
fires. When you click on the span, the blur does not fire. If I
remove the draggable from the element, then the blur fires when
changing focus from the textbox to the span.
Any ideas how to get blur to fire when clicking on a draggable
element?
(The console.log lines are for FireFox's FireBug)
<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 One');
}
$(document).ready(function() {
$( ".draggableTool" ).draggable();
$( '.property' ).blur( blurring );
$( '#label' ).click( clicking );
});
</script>
</HEAD>
<BODY>
<input type='text' class='property' id='tb1' />
<br />
<input type='text' class='property' id='tb2' />
<br />
<input type='text' class='property' id='tb3' />
<br />
<span id='label' class='draggableTool'>Label</span>
</BODY>
</HTML>
--