Question

<!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>

代码是对的，

你可以在你的exploror中尝试。

我想问一下，当我移动时，光标显示为“I”（文字类型），不移动，

我该怎么做才能解决？

我尝试使用

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

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

...

}

但它没有效果..

Answer 1

您必须摆脱浏览器的用户选择行为;这是唯一的方法。您可以通过临时指定此样式来消除选择禁用的所有副作用：

<!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>

Answer 2

请尝试更新您的正文元素声明 - 它应该阻止文本选择光标出现：

<body style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;">

何时移动如何显示光标？

2 个答案: