When the user drags the mouse over the rows, the row text gets selected, looking a bit awkward. Check the image below:
In order to prevent the user from doing these selections and to keep the rows integrity, we can use the following options:
- CSS Fix – works with all browsers except IE
- Controlling KeyEvents (onselectstart and ondragstart)- works with IE
Check the sample code below to see the implementation of both the approaches:
<html>
<head>
<style type=”text/css”>
.selecting {
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<table id=”x” onselectstart=”return false” ondragstart=”return false”>
<tr><td>1</td><td>Indy</td></tr>
<tr><td>1</td><td>Amy</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>1</td><td>Luke</td></tr>
<tr><td>1</td><td>Steve</td></tr>
</table>
</body>
</html>
Well now the user mouse drags won’t work and the page will look neat.
Ola
great share.
I consider the great cccam servers are those from fishbone cloud
I would like to see more posts like this
Thanks
Outstanding. 5-star, pre-ZACTLY what I needed!!!
Thanks a lot. I was looking just this behaviour. It works perfect.