how to prevent text selection when dragging mouse in Firefox?

Question

I am wondering how those drag and drop widgets cancel text selection in the dragging element and other elements in the page. I tried the following code which works in IE8 (c

Answer 1

There was a case where I had a horizontal scrollbar and text on the page was being selected while dragging the scroll bar. I used jQuery to add an "unselectable" class to the body when my scrolling start function fired off, and removed the class when my scrolling stop function executed. Like so:

function startDrag(event){
    $('body').addClass('unselectable');

    // start drag code
}

function stopDrag(event){
    $('body').removeClass('unselectable');

    // stop drag code
}

And this is what the unselectable class looked like in my CSS doc.

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 2

Or, analagous to your IE8 solution for Moz:

document.body.style.MozUserSelect="none"