How to make whole document selectable after making it unselectable

Question

I want to make an element draggable without causing the whole webpage to start highlighting text in the process. looking at this stackoverflow answer here it showed me the css answer.

.unselectable {
       -moz-user-select: -moz-none;
       -khtml-user-select: none;
       -webkit-user-select: none;
    
       /*
         Introduced in IE 10.
         See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
       */
       -ms-user-select: none;
       user-select: none;
    }

This is great as it allows me to undo the setting once the user stops dragging simply by removing the class however apparently this doesnt work on older browsers. so the answer also suggested this

$.fn.extend({ 
            disableSelection: function() { 
                this.each(function() { 
                    if (typeof this.onselectstart != 'undefined') {
                        this.onselectstart = function() { return false; };
                    } else if (typeof this.style.MozUserSelect != 'undefined') {
                        this.style.MozUserSelect = 'none';
                    } else {
                        this.onmousedown = function() { return false; };
                    }
                }); 
            } 
        });

        $(document).ready(function() {
            $('label').disableSelection();            
        });

(I havent tested to see if this code works and he placed the full html in his answer but didnt post it as a snippet) However i dont know how to undo this function inside of the onmouseup event.

what is the best cross browser backwards compatible way of making a whole document selectable after making it unselectable?