Created
December 7, 2010 16:53
-
-
Save HenrikJoreteg/732048 to your computer and use it in GitHub Desktop.
For single page apps with lots of dnd, disable selectable, turn on for exceptions.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Some single page app</title> | |
<style> | |
/* | |
Here's the magic, we take the unselectable attribute and make it more powerful | |
in browsers that support it see here for more: | |
http://help.dottoro.com/lcrlukea.php#-webkit-user-select | |
*/ | |
[unselectable=on] { | |
-moz-user-select: none; | |
-webkit-user-select: none; | |
} | |
[unselectable=off] { | |
-moz-user-select: auto; | |
-webkit-user-select: auto; | |
} | |
/* enable it for p tags (for example) */ | |
p { | |
-moz-user-select: auto; | |
-webkit-user-select: auto; | |
} | |
</style> | |
</head> | |
<body unselectable="on"> | |
<ul class="draggable items"> | |
<li>first non-selectable draggable</li> | |
<li>second non-selectable draggable</li> | |
</ul> | |
<p>Nothing here is selectable</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You should do this on jsFiddle so we can play with it :-)