<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box" style="width: 600px;position: absolute;border: red 1px solid">
<div id="title" style="height: 40px;color:white;background-color: black">内容</div>
<div style="height: 200px">标题</div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
$(‘#title‘).mouseover(function () {
$(this).css(‘cursor‘,‘move‘)
}).mousedown(function (event) {
var start_x=event.screenX;
var start_y=event.screenY;
var parent_left=$(this).parent().offset().left;
var parent_top=$(this).parent().offset().top;
$(this).mousemove(function (event) {
var new_x=event.screenX;
var new_y=event.screenY;
var new_parent_left=parent_left+new_x-start_x;
var new_parent_top=parent_top+new_y-start_y;
$(this).parent().css(‘left‘,new_parent_left+"px");
$(this).parent().css(‘top‘,new_parent_top+"px");
}).mouseup(function () {
$(this).off("mousemove");
})
})
</script>
</body>
</html>
jquery_拖动事件