Text Selection Internet Explorer

Question

I have tried with no success to disable text selection in this code. EDIT(Thanks techfoobar): http://jsfiddle.net/5uG63/3/ The only element that I have applied the majority of the code to is the element that has the three in it. The rest of them you will be able to highlight. I know none of the dragging functions work seeing this is a snippet of a much larger block of code that would be hard to post seeing it is getting the elements through Ajax. I am not really worried about the users selecting the text for the sense of possibly taking the information, but sometimes when the text get selected it interferes with the drag and drop function.

For the element containing the three, and all the others when they are enabled, there seems to be only one case that this happens. Using Internet Explorer, if you were to click in the center of the white space between the two boxes at the far left side, and then drag your mouse across to the far right of the two boxes, the number 3 then becomes selected. I am using Internet Explorer 9.

I tried disabling it in the CSS, which seems to have little effect. I think that the issue is that it is being selected from outside the div that it is in.

That is the CSS that I used: How to disable text selection highlighting using CSS?

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Thanks for your help!

Answer 1

For your table, you have specified onselectstart="select()" . You should change this to onselectstart="return select()" (note the return ) to ensure that the false you are returning from the select() function is notified to the browser, which in turn blocks selection.

Check this fiddle : http://jsfiddle.net/5uG63/4/

Note: This will work only if you start the selection from the element itself. If you start selecting from outside your table, things will still get selected.