解决JavaScript的错误信息

zlt0118_peach 2018-04-19 10:25:54

不知道哪里错了，也不知道什么意思

上面使JavaScript程序

这是在HTML中的引用
求指导，谢谢！！
...全文
1660 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
zlt0118_peach 2018-05-08
  • 打赏
  • 举报
 回复
对呀！我把JS文件单独放在一个文件里面，在HTML文件中<script type="text/javascript" src="JS/JStype.js"></script>中引用，就不能实现拖拽功能， 但是，我把JS文件放在HTML文件的最后面，就能够实现拖拽功能。 所以，想问一下这个是什么原因，还是JS文件的放置位置有差别吗？ 不懂，请教，谢谢！
zlt0118_peach 2018-05-03
  • 打赏
  • 举报
 回复 
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);
}
var dialogInstace , onMoveStartId , mousePos = {x:0,y:0};	//	用于记录当前可拖拽的对象

// 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 Dialog( dragId , moveId ){

    var instace = {} ;

    instace.dragElement  = g(dragId);	//	允许执行 拖拽操作 的元素
    instace.moveElement  = g(moveId);	//	拖拽操作时，移动的元素

    instace.mouseOffsetLeft = 0;			//	拖拽操作时，移动元素的起始 X 点
    instace.mouseOffsetTop = 0;			//	拖拽操作时，移动元素的起始 Y 点

    instace.dragElement.addEventListener('mousedown',function(e){

        var e = e || window.event;

        dialogInstace = instace;
        instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
        instace.mouseOffsetTop  = e.pageY - instace.moveElement.offsetTop ;

        onMoveStartId = setInterval(onMoveStart,10);
        return false;
        // instace.moveElement.style.zIndex = zIndex ++;
    })

    return instace;
}

//	在页面中侦听 鼠标弹起事件
document.onmouseup = function(e){
    dialogInstace = false;
    clearInterval(onMoveStartId);
}
document.onmousemove = function( e ){
    var e = window.event || e;
    mousePos.x = e.clientX;
    mousePos.y = e.clientY;


    e.stopPropagation && e.stopPropagation();
    e.cancelBubble = true;
    e = this.originalEvent;
    e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false );

    document.body.style.MozUserSelect = 'none';
}

function onMoveStart(){


    var instace = dialogInstace;
    if (instace) {

        var maxX = document.documentElement.clientWidth -  instace.moveElement.offsetWidth;
        var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;

        instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
        instace.moveElement.style.top  = Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";

    }

}





//	重新调整对话框的位置和遮罩，并且展现
function showDialog(){
    g('dialogMove').style.display = 'block';
    g('mask').style.display = 'block';
    autoCenter( g('dialogMove') );
    fillToBody( g('mask') );
}

//	关闭对话框
function hideDialog(){
    g('dialogMove').style.display = 'none';
    g('mask').style.display = 'none';
}

//	侦听浏览器窗口大小变化
window.onresize = showDialog;

Dialog('dialogDrag','dialogMove');
showDialog();
<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="UTF-8">-->
    <title>百度登录页面拖拽</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css"/>
    <script type="text/javascript" src="JS/JStype.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

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

<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
    <div class="ui-dialog-title" id="dialogDrag"  onselectstart="return false;" >

        登录通行证

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

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

    var dialogInstace , onMoveStartId , mousePos = {x:0,y:0};	//	用于记录当前可拖拽的对象

    // 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 Dialog( dragId , moveId ){

        var instace = {} ;

        instace.dragElement  = g(dragId);	//	允许执行 拖拽操作 的元素
        instace.moveElement  = g(moveId);	//	拖拽操作时，移动的元素

        instace.mouseOffsetLeft = 0;			//	拖拽操作时，移动元素的起始 X 点
        instace.mouseOffsetTop = 0;			//	拖拽操作时，移动元素的起始 Y 点

        instace.dragElement.addEventListener('mousedown',function(e){

            var e = e || window.event;

            dialogInstace = instace;
            instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
            instace.mouseOffsetTop  = e.pageY - instace.moveElement.offsetTop ;

            onMoveStartId = setInterval(onMoveStart,10);
            return false;
            // instace.moveElement.style.zIndex = zIndex ++;
        })

        return instace;
    }

    //	在页面中侦听 鼠标弹起事件
    document.onmouseup = function(e){
        dialogInstace = false;
        clearInterval(onMoveStartId);
    }
    document.onmousemove = function( e ){
        var e = window.event || e;
        mousePos.x = e.clientX;
        mousePos.y = e.clientY;


        e.stopPropagation && e.stopPropagation();
        e.cancelBubble = true;
        e = this.originalEvent;
        e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false );

        document.body.style.MozUserSelect = 'none';
    }

    function onMoveStart(){


        var instace = dialogInstace;
        if (instace) {

            var maxX = document.documentElement.clientWidth -  instace.moveElement.offsetWidth;
            var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;

            instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
            instace.moveElement.style.top  = Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";

        }

    }





    //	重新调整对话框的位置和遮罩，并且展现
    function showDialog(){
        g('dialogMove').style.display = 'block';
        g('mask').style.display = 'block';
        autoCenter( g('dialogMove') );
        fillToBody( g('mask') );
    }

    //	关闭对话框
    function hideDialog(){
        g('dialogMove').style.display = 'none';
        g('mask').style.display = 'none';
    }

    //	侦听浏览器窗口大小变化
    window.onresize = showDialog;

    Dialog('dialogDrag','dialogMove');
    showDialog();

</script>-->

</body>
</html>
如果我把JS文件放在HTML中能够实现拖拽功能，不过如果我用单独的JS文件就不能实现，想知道为什么。
天际的海浪 2018-05-03
  • 打赏
  • 举报
 回复
js文件放到页面最后边加载
天际的海浪 2018-04-19
  • 打赏
  • 举报
 回复
你事件中event对象设定的参数名是ev。使用时却写成 e e.clientX, e.clientY
usecf 2018-04-19
  • 打赏
  • 举报
 回复
你把代码贴出来 不要贴图
11个震撼的javascript网页效果
11个震撼的javascript网页效果
JavaScript网页设计300例
(这是另一个的修正版)300个javascript 综合实例子, 右键查看源代码. 基本上该有的都有了.
Javascript基础到入门
Javascript基础到入门视频，该课程主要围绕JavaScript能做什么？JavaScript应用场合、JavaScript的学习方法三大话题展开教学。讲师介绍：张中强，诺客科技技术总监/研发总监。丰富的项目经验，善于用精炼的代码来展示复杂的软件开发技术。曾参与并主持多个国家重大项目的开发，包括中国人民银行资金清算系统、中国银监会智能报表处理系统，电力调度系统。拥有10年以上软件技术开发培训经验，微软认证讲师(MCP)，微软认证数据库管理员(MCDBA)，微软认证系统工程师(MCSE)。
spket插件
spket插件
SWFUpload实现多文件上传
SWFUpload实现多文件上传，servlet+jsp
JavaScript

87,955

社区成员

224,621

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章