老师，控制台报错是什么问题？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tradition-dragging</title>
<style>
.dialog {
position: absolute;
left: 100px;
top: 50px;
width: 100px;
}

.title {
background-color: #D7DEF0;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
cursor: move;
}

.content {
background-color: #F0F0F0;
width: 100%;
height: 200px;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="dialog" class="dialog">
<div id="title" class="title">Title</div>
<div class="content"></div>
</div>
<script>
var isMouseDown = false;  //定义鼠标是否按下
var lastPoint = {};
$('#title').on('mousedown',function(e) {

isMouseDown = true;
lastPoint.x = e.PageX;
lastPoint.Y = e.PageY;
}),
.on('mousemove',function(e) {
if(idMouseDown) {
var dialog = $('#dialog');
var targetX = ParseInt(dialog.css('left')) + e.pageX - lastPoint.X;
var targetY = ParseInt(dialog.css('TOP')) + e.pageY - lastPoint.Y;

dialog.css('left',targetX + 'px');
dialog.css('top',targetY + 'px');

lastPoint.x = e.PageX;
lastPoint.Y = e.PageY;
};
}),
.on('mouseup',function() {
isMouseDown = false;
lastPoint = {};
});
</script>
</body>
</html>

广东靓仔 2019-08-09

源自：HTML5拖拽上传 2-2 传统拖拽的简单实现（脚本部分）

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-08-09 16:25:44

同学你好，

代码中问题较多，已经在下面代码中进行了修改，并添加了注释：

<script>
    var isMouseDown = false; //定义鼠标是否按下
    var lastPoint = {};
    $('#title').on('mousedown', function(e) {

            isMouseDown = true;
            // pageX和pageY中p不需要大写
            // lastPoint.x = e.PageX;
            lastPoint.x = e.pageX;
            lastPoint.Y = e.pageY;
            // 这里不需要逗号
            // }),
        })
        .on('mousemove', function(e) {
            // 单词写错了，前面是is不是id
            // if (idMouseDown) {
            if (isMouseDown) {
                var dialog = $('#dialog');
                // parseInt()首字母不大写，lastPonit.x在定义的时候x是小写，不是大写哦
                var targetX = parseInt(dialog.css('left')) + e.pageX - lastPoint.x;
                // 将p改为小写，top属性是小写的
                // var targetY = ParseInt(dialog.css('TOP')) + e.pageY - lastPoint.Y;
                var targetY = parseInt(dialog.css('top')) + e.pageY - lastPoint.Y;

                dialog.css('left', targetX + 'px');
                dialog.css('top', targetY + 'px');
                // page中p是小写的
                // lastPoint.x = e.PageX;
                lastPoint.x = e.pageX;
                // lastPoint.Y = e.PageY;
                lastPoint.Y = e.pageY;
            };
            // 这里不需要逗号
            // }),
        })
        .on('mouseup', function() {
            isMouseDown = false;
            lastPoint = {};
        });
    </script>

可以修改测试下哦，祝学习愉快！

收起回答