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!

Awards and Achivements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome

Events

serf DDM

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2015. Login