Software Technology Tips

Solution
The javascript event, "onselectstart ", can be used to handle this issue , To prevent elements within the div from being highlighted while dragging we can use the following statement.

<div onselectstart=" return false"></div>
//this function will perform as onselectstart forboth in IE and FF

function disableSelection(target)
{
    //For IE This code will work
    if (typeof target.onselectstart!="undefined")
    target.onselectstart=function(){return false}
    
    //For Firefox This code will work
    else if (typeof target.style.MozUserSelect!="undefined")
    target.style.MozUserSelect="none"
    
    //All other  (ie: Opera) This code will work
    else
    target.onmousedown=function(){return false}
    target.style.cursor = "default"
}


As the parameter we are sending the div id in the " document.getELementById('yourDivId')" format

The following code snippet demonstrates a complete implementation of the functionality

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Checking Mouse Drag</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function disableSelection(target)
{
    //For IE This code will work
    if (typeof target.onselectstart!="undefined")
    target.onselectstart=function(){return false}
    
    //For Firefox This code will work
    else if (typeof target.style.MozUserSelect!="undefined")
    target.style.MozUserSelect="none"
    
    //All other  (ie: Opera) This code will work
    else
    target.onmousedown=function(){return false}
    target.style.cursor = "default"
}
</script>
</head>
<body>
    <div id="MyDiv" style="width:300px; padding:5px; text-align:justify; border:2px solid #0066FF; font-family:Verdana; font-size:11px; color:#666666;">
        In this div if you will press mouse and drag this will select the text within.In this div if you will press mouse and drag this will select the text within
        In this div if you will press mouse and drag this will select the text within.In this div if you will press mouse and drag this will select the text within
        In this div if you will press mouse and drag this will select the text within.In this div if you will press mouse and drag this will select the text within
        In this div if you will press mouse and drag this will select the text within.In this div if you will press mouse and drag this will select the text within
    </div>
    <br>
    <div id="MyDivUnSelect" style="width:300px;padding:5px; text-align:justify; border:2px solid #0066FF; font-family:Verdana; font-size:11px; color:#666666;">
        In this div if you will press mouse and drag this will not select the text within.In this div if you will press mouse and drag this will not select the text within
        In this div if you will press mouse and drag this will not select the text within.In this div if you will press mouse and drag this will not select the text within
        In this div if you will press mouse and drag this will not select the text within.In this div if you will press mouse and drag this will not select the text within         
        In this div if you will press mouse and drag this will not select the text within.In this div if you will press mouse and drag this will not select the text within
    </div>    
</body>

<script>
//Calling the JS function directly just after body load
disableSelection(document.getElementById('MyDivUnSelect'))
</script>

</html>

<!--*************************************************************
"MyDiv" and "MyDivUnSelect" are two divs in Html while if you drag mouse in "MyDiv" you can able to select text, but within "MyDivUnSelect"
you can not select text by dragging the mouse, because i ahve called the "disableSelection" directly after the loading of the body.
*****************************************************************-->


NOTE : onselectstart only works in IE :) not in Firefox :( . the following code we can use to handle the issue in IE as well as in Firefox ;)


Related Tags:

PHP

Author: Abinash Grahachrya

JavaScript

Let us Connect!

iso 9001 QA25 Red Herring STPI D&B Fastest Growing SME 2013 Award zinnov Nasscom

copyright (c) Mindfire Solutions 2007-2014. Login