<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>拖动面板</title>
<meta charset="UTF-8">
</head>
<body>
<div style='width:600px;position:absolute;border:1px solid #ddd'>
<div id="title" style="background-color: black;height: 40px;color:white">标题</div>
<div id="content" style="height: 300px;">内容</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$('#title').mouseover(function () {
$(this).css('cursor','move');
}).mousedown(function (evnent) {
var start_x=event.screenX;
var start_y=event.screenY;
var parent_left=$(this).parent().offset().left;
var parent_top=$(this).parent().offset().top;
//event拿到的是新的位置坐标(event放在触发的函数里面)
$(this).on('mousemove',function (e) {
var new_st_x=e.screenX;
var new_st_y=e.screenY;
var new_par_x=parent_left+(new_st_x-start_x);
var new_par_y=parent_top+(new_st_y-start_y);
$(this).parent().css('left',new_par_x+'px');
$(this).parent().css('top',new_par_y+'px');
}).mouseup(function () {
$(this).off('mousemove');
})
})
</script>
</body>
</html>
