jQuery之拖动面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面板</title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div style="border: 1px solid gold;width: 500px;position: absolute">
<div id="title" style="background: black;height: 50px;color: wheat">
标题
</div>
<div id="content" style="background: antiquewhite;height: 400px;color: black">
内容
</div>
</div>
<script>
$(function () {
$('#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).on('mousemove',function (e) {
var new_x = e.screenX
var new_y = e.screenY
var new_parent_x = parent_left+(new_x-start_x)
var new_parent_y = parent_top+(new_y-start_y)
$(this).parent().css('left',new_parent_x)
$(this).parent().css('top',new_parent_y)
}).mouseup(function () {
$(this).off("mousemove")
})
})
})
</script>
</body>
</html>