<!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;
start_y event.screenY = var;
. parent_left var = $ (the this) .parent () offset () left;.
var parent_top = $ (the this) .parent () offset () Top;..
// get the Event the new position coordinates (event triggered on the inside function)
$ (the this) .on ( 'mouseMove', function (E) {
var new_st_x = e.screenX;
var = new_st_y e.screenY;
var = parent_left new_par_x + (new_st_x- start_x);
var new_par_y = parent_top + (new_st_y-start_y);
. $ (the this) .parent () CSS ( 'left', new_par_x + 'PX');
. $ (the this) .parent () CSS ( 'Top', new_par_y + 'PX');
}) mouseUp (function () {.
$ (the this) .off ( 'mouseMove');
})
})
</ Script>
</body>
</html>
