<!DOCTYPE html>
<html lang="en">
<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;
cursor: move;
}
</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 = {};
$("#main").on("mousedown",function(e){
isMouseDown = true;
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}).on("mousemove",function(e){
if(isMouseDown)
{
var target = $("#main");
var targetX = parseInt(target.css("left")) + e.pageX - lastPoint.x;
var targetY = parseInt(target.css("top")) + e.pageY - lastPoint.y;
target.css("left",targetX + "px");
target.css("top",targetY + "px");
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}
}).on("mouseup",function(){
isMouseDown = false;
lastPoint = {};
})
</script>
</body>
</html>
1424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
