All geek questions in one place

Using jQuery, setting Draggable on an element prevents it from blurring when clicked when you click a drag element

Using jQuery, when you set a blur event in a text field and set another element as draggable, when you click a drag element, the blur event does not fire in FireFox. IE is a little better, you get a blur event, but you don't get a click event on a draggable item.

If you do not specify undo: "" in the draggable constructor, you will get a blur event, but then the element you want to drag is not draggable.

jQuery v1.3.2 jQuery UI v1.7.2

The console.log lines are for the FireFox FireBug plugin.

<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>
+3
source share
2 answers

I had the same problem. This is mistake. For solution see here: http://dev.jqueryui.com/ticket/4261

+5
source

It is possible that the draggable label is not configurable. Try adding the tabindex attribute to it. That way, when you click on it, it will focus (and therefore blur other elements).

0
source

Source: https://habr.com/ru/post/1498850/

More articles:


All Articles