这样设置应该没啥问题了吧
<!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;
text-align: center;
}
#div1{
width: 200px;
height: 20px;
background-color: red;
cursor: move;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="div1">我能被拖动</div>
</div>
<script type="text/javascript">
var isMouseDown = false;
var lastPoint={};
$("#div1").on("mousedown",function(e){
isMouseDown = true;
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
});
$("#div1").on("mousemove",function(e){
if(isMouseDown){
var main = $("#main");
var minleft= 0;
var mintop=0;
var maxleft=600;
var maxtop=600;
var left=parseInt(main.css("left"));
var top=parseInt(main.css("top"));
if(left<minleft){
left=minleft;
}
if(left>maxleft){
left=maxleft;
}
if(top<mintop){
top=mintop;
}
if(top>maxtop){
top=maxtop;
}
var X = left + e.pageX - lastPoint.x;
var Y = top + e.pageY - lastPoint.y;
main.css("left",X + "px");
main.css("top",Y + "px");
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}});
$("#div1").on("mouseup",function(){
isMouseDown = false;
lastPoint = {};
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星