好像有点问题啊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#main{
width:200px;
height:200px;
background: yellow;
position: absolute;
top:100px;
left:100px;
-webkit-user-select: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
我能被拖动
</div>
<script type="text/javascript">
// 此处写代码
var isMouseDown=false;
var lastPoint={};
var main=$("#main");
main.on("mousedown",function(e){
isMouseDown=true;
lastPoint.x=e.pageX;
lastPoint.y=e.pageY;
})
$(document).on("mousemove",function(e){
if(isMouseDown){
var targetX=parseInt(main.css("left"))+e.pageX-lastPoint.x;
var targetY=parseInt(main.css("top"))+e.pageY-lastPoint.y;
if(targetX<=0){
main.css("left",0);
}else if(targetX>=$(document.body).width()-main.innerWidth()){
main.css("left",$(document.body).width()-main.innerWidth()+"px");
}else{
main.css("left",targetX+"px");
}
if(targetY<=0){
main.css("top",0);
}else if(targetY>=$(document.body).height()-main.innerHeight()){
main.css("top",$(document.body).height()-main.innerHeight()+"px");
}else{
main.css("top",targetY+"px");
}
lastPoint.x=e.pageX;
lastPoint.y=e.pageY;
}
}).on("mouseup",function(e){
isMouseDown=false;
lastPoint={};
})
console.log($("#main").innerHeight());
</script>
</body>
</html>怎么一直在闪，感觉代码没啥问题啊
正在回答
1、发生抖动的原因分析：
（1）首先我们需要知道，我们的拖拽元素是在可视区域内进行拖拽的
（2）接下来，来看两组代码：
$(document.body).width()获取的是浏览器当前窗口文档body的宽度 $(document.body).height()获取的是浏览器当前窗口文档body的高度
这里的body的高度可以理解成是由被拖拽元素撑开的，并不是可视区域的高度哦
$(window).width()获取的是浏览器当前窗口可视区域的宽度 $(window).height()获取的是浏览器当前窗口可视区域的高度
所以，发生抖动的主要是因为如下代码的问题导致的，将$(document.body).width()、$(document.body).height()分别修改成$(window).width()和$(window).height()，让浏览器能够正确判断元素是否是在可视区域内被拖拽即可解决抖动问题
举个不太恰当的小例子，比如我让你帮我买一瓶牛奶，但是没有准确告诉你买哪一个品牌的，这个时候你就会很犹豫、很纠结不知道买哪一个好，$(document.body).width()和$(document.body).height()就类似这种情况，因为没有给body设置固定的宽度和高度，这就导致浏览器没办法准确的判断被拖拽元素的活动范围和停靠边界，不知道到底该在哪里停靠；而如果我告诉你帮我买一瓶伊利的牛奶，你就会迅速、准确的进行购买，$(window).width()和$(window).height()就类似这种情况，准确的告知浏览器被拖拽元素在当前窗口可视区域范围活动，这个时候，浏览器就能准确的判断元素到底能在哪个区域活动，在哪里进行停靠了
1、从代码的规范性上来讲，如果为了方式鼠标移动过快导致元素跟不上的问题，那么建议将所有的事件都绑定在document上，而不是单独将mousemove绑定在document上，当然，只将mousemove绑定在document上也能实现效果，只是不够规范。
2、关于if判断条件，不是必须设置成<和>=，只是从代码性能和规范上来讲，<=和>=都有=，实际上是没有必要的，两者只有一个条件进行判断=这种情况即可
3、判断中的位置是设置边界位置的，也就是防止元素被拖拽到可视区域范围以外，也就是控制拖拽不超出可视范围的，判断中的位置点设置的目的是防止如下这种情况的出现：
而下列这段代码是设置可视区域内的拖拽元素的位置
同学可以结合代码仔细梳理一下思路哦，再理解一下哦
希望可以帮到你！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星