Disable Text Selection in HTML Page

I was working today on a UI fix to disable the text selection in the Dynamic Language Tools preference window during the drag & drop operation. After looking at the few samples on the web, I found that similar to many other compatibility issues, this is supported differently in IE and FireFox.

Here is one good article if you want to implement your custom drag and drop:
http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

If you want ready made solution, I would recommend JQuery. It’s simple, small and elegant. Back to original problem, the solution discussed in the above article works very well for the IE, but for some reason it was not working in the FireFox (though the article claims that it should work in FireFox and other browsers too). Anyway, after more browsing, I found that you can disable the text selection in the FireFox by a CSS style. You can create a CSS class for like this:

.NoSelection {  -moz-user-select: none; }

So to disable selection in the drag and drop (and in general for any other operation), you can do this by the following JavaScript functions:


function disableSelection(srcElement)
{
srcElement.style.MozUserSelect = "none";
srcElement.onselectstart = function () { return false; };
}


function enableSelection(srcElement)
{
srcElement.style.MozUserSelect = "";
srcElement.onselectstart = null;
}


So now if you want to disable the text selection for all the text on the page (for example, for copy protection). Then you can do this by using a simple javascript like this:


disableSelection(document.body)


Of course, any clever programmer can disable this by using FireBug or directly executing JavaScript from URL bar, but there are very few who are that clever.