Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to prevent text selection when dragging mouse in Firefox?

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 (cannot select text) but does not work (can still select text) in Firefox.

<!DOCTYPE html>
<html>
<body>
  <p>Hello World</p>
  <script type="text/javascript">
    document.onmousemove = function() {
      return false;
  }
  </script>
</body>
</html>
like image 759
powerboy Avatar asked May 28 '10 18:05

powerboy


2 Answers

Or, analagous to your IE8 solution for Moz:

document.body.style.MozUserSelect="none"
like image 143
Matthew Smith Avatar answered Sep 28 '22 07:09

Matthew Smith


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;
}
like image 45
Smooth Customer Avatar answered Sep 28 '22 07:09

Smooth Customer