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>
Or, analagous to your IE8 solution for Moz:
document.body.style.MozUserSelect="none"
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With