Dane. Designer.

Old Blog

Stop the Browser Selecting Text When Dragging

In playing around with the interface design for an as of yet unannounced—so far webkit only, and altogether largely non existing, I might add—project, I came across several nice-to-know a-ha’s and gotcha’s that are unbelievably helpful for trying to get beyond the usual flaky ‘yeah, we’re still in the browser alright’-feel of most web apps out there, one of which is the remedy to how when you’re using something like this timeline, and you end up selecting text and other elements on the page as you try to navigate it? Stuff like that makes me want to blow my brains out.

Well, saved by the bell, there’s a CSS3 property for that called user-select, it works at least in both Webkit and Mozilla, and it’s heavenly. There’s a lot of uses for it, but for something like the stuff we’re going to do, which is a lot of dragging and dropping of elements, we’ll probably end up simply adding a basic class to the BODY element whenever we don’t want text to be selected, and ├ęt voila.

body.dragginginprogress { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

World peace. Easy as that.

It’s these small things, the things that you don’t see people writing massive colorful articles about, that really make my day.

You can see it in action in my playpen, though I won’t promise I don’t break that n the near future as I throw various things up on the wall to see what sticks.

Update: If you’re using jQuery UI, there’s also an (undocumented) function called .disableSelection().