请问各位大神以下代码哪里错了折腾一天了 {代码...}

简单的看了一下貌似都没看到mousedown事件应该是mousedown事件里注册mousemove和mouseup事件这两个事件注册给document 然后mouseup事件执行时要注销掉mouseup和mousemove事件

你代码写的好乱。 mousemove和mouseup是发生在document上的，因为是整个文档可拖动，不是只有那个在鼠标在登录框才可拖动。 mousemove和mouseup发生的前提是mousedown发生成功，所以一般mouseup和mousemove写在mousedown里面。 mouseup里面要清除mousemove和mouseup的事件，你写的isDraging我没找到这个值在哪定义的。

javascript - JS拖拽元素问题

请问各位大神以下代码哪里错了折腾一天了


<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>拖拽效果</title>

<style type="text/css">
    
    body{background: url(images/baidu_demo.png) #fff top center no-repeat;padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑";}

    .link{text-align: right;line-height: 20px;padding-right: 40px;}
    
    .ui-dialog{ 
        width: 380px;height: auto;display: none;
        position: absolute;z-index: 9000;
        top: 0px;left: 0px;
        border: 1px solid #D5D5D5;background: #fff;
    }

    .ui-dialog a{text-decoration: none;}

    .ui-dialog-title{
        height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
        border-bottom: 1px solid #efefef;background: #f5f5f5;
        cursor: move;
        user-select:none;
    }
    .ui-dialog-closebutton{
        width: 16px;height: 16px;display: block;
        position: absolute;top: 12px;right: 20px;
        background: url(images/close_def.png) no-repeat;cursor: pointer;

    }
    .ui-dialog-closebutton:hover{background:url(images/close_hov.png);}

    .ui-dialog-content{
        padding: 15px 20px;
    }
    .ui-dialog-pt15{
        padding-top: 15px;
    }
    .ui-dialog-l40{
        height: 40px;line-height: 40px;
        text-align: right;
    }

    .ui-dialog-input{
        width: 100%;height: 40px;
        margin: 0px;padding:0px;
        border: 1px solid #d5d5d5;
        font-size: 16px;color: #c1c1c1;
        text-indent: 25px;
        outline: none;
    }
    .ui-dialog-input-username{
        background: url(images/input_username.png) no-repeat 2px ;
    }

    .ui-dialog-input-password{
        background: url(images/input_password.png) no-repeat 2px ;
    }
    .ui-dialog-submit{
        width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
        outline: none;text-decoration: none;
        display: block;text-align: center;line-height: 50px;
    }
    .ui-dialog-submit:hover{
        background: #3f81b0;
    }

    .ui-mask{ 
        width: 100%;height:100%;background: #000;
        position: absolute;top: 0px;height: 0px;z-index: 8000;
        opacity:0.4; filter: Alpha(opacity=40);
    }
</style>
</head>
<body>

<p class="link">
    <a href="javascript:showDialog();">登录</a>
</p>
<p class="ui-mask" id="mask"></p>

<p class="ui-dialog" id="dialogMove">
    <p class="ui-dialog-title" id="dialogDrag"  onselectstart="return false">
        
        登录通行证

        <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>

    </p>
    <p class="ui-dialog-content">
        <p class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手机/邮箱/用户名" />
        </p>
        <p class="ui-dialog-l40 ui-dialog-pt15">
            <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密码" />
        </p>
        <p class="ui-dialog-l40">
            <a href="#">忘记密码</a>
        </p>
        <p>
            <a class="ui-dialog-submit" href="#" >登录</a>
        </p>
        <p class="ui-dialog-l40">
            <a href="#">立即注册</a>
        </p>
    </p>
</p>


<script type="text/javascript">

    
    
    // var zIndex = 9000;

    //    获取元素对象    
    function g(id){return document.getElementById(id);}

    //    自动居中元素（el = Element）
    function autoCenter( el ){
        var bodyW = document.documentElement.clientWidth;
        var bodyH = document.documentElement.clientHeight;

        var elW = el.offsetWidth;
        var elH = el.offsetHeight;

        el.style.left = (bodyW-elW)/2 + 'px';
        el.style.top = (bodyH-elH)/2 + 'px';
        
    }

    //    自动扩展元素到全部显示区域
    function fillToBody( el ){
        el.style.width  = document.documentElement.clientWidth  +'px';
        el.style.height = document.documentElement.clientHeight + 'px';
    };
    

    //    Dialog实例化的方法
    function showDialog(){
        
        fillToBody( g("mask") );
        g("dialogMove").style.display="block";
        autoCenter( g("dialogMove") );
        g("dialogMove").onmousedown=function(e){
            
            var e=e||window.event;
            var startX=e.pageX-g("dialogMove").offsetLeft;
            var startY=e.pageY-g("dialogMove").offsetTop;
            
        };
        g("dialogMove").onmouseUp=function(e){
            isDraging=false;
            
        };
        g("dialogMove").onmouseMove=function(e){
            
            var e=e||window.event;
            g("dialogMove").style.left=e.pageX-startX+"px";
            g("dialogMove").style.top=e.pageY-startY+"px";
            
            
        }
    }
    

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

黄舟2804 Il y a quelques jours675

javascript - JS拖拽元素问题

répondre à tous(2)je répondrai