Jeff Widmer's Blog - Archives - 2011

jQuery: Textbox in sortable is not clickable/selectable

Monday, January 31, 2011

1 Comment

I am using the jQuery UI Sortable and ran into an issue where a textbox (<input type="text" /> that is within one of the sortable elements was not clickable (You could not put the insertion caret into the textbox). Trying to use your mouse to put the cursor within the textbox would do nothing.

Eventually I was able to track it down to the use of the Sortable.Cancel Option. I have some elements within each of sortable rows which I do not want to trigger the sorting if they are clicked on. For instance there is an anchor tag for deleting the sortable item that I do not want to trigger the start of sorting. In other words, if someone clicks on the delete link and then accidentally drags their mouse a little, I do not want sorting to start.

So to prevent sorting on the anchor tag, I used the Cancel Option:

$(".selector").sortable("option", "cancel", 'a');

What I did not realize was this setting of the jQuery UI Sortable Cancel Option overwrites the default cancel settings of:

$(".selector").sortable("option", "cancel", ':input,button');

So instead of cancel working on “:input, button, AND a” it is ONLY working on “a”. Not what I wanted... and also explains the behavior where the textbox is not clickable... because of my overwriting of the default cancel option, textbox elements now trigger the sorting, and this prevents them from the insert caret getting placed in the textbox when clicked.

So the solution to my problem was to set the jQuery UI Sortable Cancel option and include the default elements when being set like this:

$(".selector").sortable("option", "cancel", ':input,button,a');