Home/ Questions/Q 7536687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:38:40+00:00

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html;charset=utf-8>

  • 0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style>
            *{margin:0px;padding:0px}
        </style>
    </head>
    <body>
        <div id="my" style="width:200px;height:150px;background:#f1fada;">
            <div id="top" style="background:#f4f4f4;cursor:move">tip</div>
            <div id="bv">
                this  is  a  test
            </div>
        </div>

        <script>
            function $(o){
                return document.getElementById(o);  
            }
        $("top").onmousedown=function(event){


                var  x1=event.clientX-$("my").offsetLeft;
                var y1=event.clientY-$("my").offsetTop;
                var witchButton=false;
                 if(document.all&&event.button==1){witchButton=true;}
                 else{if(event.button==0)witchButton=true;}
                if(witchButton)
                 {
                    $("top").onmousemove=function(event){
                         $("my").style.position="absolute";
                         $("my").style.left=event.clientX-x1+"px"; 
                            $("my").style.top=event.clientY-y1+"px";    
                    }
                    $("top").onmouseup=function(){
                            $("top").onmousemove=null;
                 }
                }
            }

        </script>
    </body>
</html>

the code is right,

you can try it in your exploror.

I want to ask when I move ，the cursor display is ” I “（Text type） ,not move，

how can i do to fix?

i try that i use

$("top").onmousemove=function(event){

$("my").style.cursor="move";

...

}

but It has no effect。。

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to get rid of user-select behaviour of the browser; it’s the only way. You can get rid of all the side effects of selection disabling by assigning this style temporary:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <style>
            *{margin:0px;padding:0px}
            .no-user-select {
              -moz-user-select: none; 
              -webkit-user-select: none; 
              -ms-user-select: none;
              cursor:move;
            }
        </style>
    </head>
    <body>
        <div id="my" style="width:200px;height:150px;background:#f1fada; ">
            <div id="top" style="background:#f4f4f4;cursor:move; ">tip</div>
            <div id="bv">
                this  is  a  test
            </div>
        </div>
        gdfgd

        <script>
            function $(o){
                return document.getElementById(o);  
            }
        $("top").onmousedown=function(event){

                document.getElementsByTagName('body')[0].className = 'no-user-select';

                var  x1=event.clientX-$("my").offsetLeft;
                var y1=event.clientY-$("my").offsetTop;
                var witchButton=false;
                 if(document.all&&event.button==1){witchButton=true;}
                 else{if(event.button==0)witchButton=true;}
                if(witchButton)
                 {
                    $("top").onmousemove=function(event){
                         $("my").style.position="absolute";
                         $("my").style.left=event.clientX-x1+"px"; 
                         $("my").style.top=event.clientY-y1+"px";    
                    }
                    $("top").onmouseup=function(){
                         $("top").onmousemove=null;
                         document.getElementsByTagName('body')[0].className = '';

                 }
                }
            }

        </script>
    </body>
</html>
    • 0