<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <div style="border: #336699 1px solid;600px ;position: absolute" > <div id="title" style="border: #303a40 1px solid;height: 48px;background-color: #425a66">标题</div> <div style="border: #425a66 1px solid;height: 400px">内容</div> </div> </body> <script> //鼠标经过title时变成移动样式 $("#title").mouseover(function () { $(this).css("cursor","move"); }); //点击鼠标时，坐标位置和，parent的div位置坐标 $("#title").mousedown(function (event) { var current_x =event.screenX; var current_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 parent_xx = parent_left+(new_x-current_x); var parent_yy = parent_top+(new_y-current_y); //新的parent的div移动的位置 //重新绘制 $(this).parent().css("left",parent_xx+"px"); $(this).parent().css("top",parent_yy+"px"); }).mouseup(function () { //释放鼠标 $("#title").off("mousemove") }); }); </script> </html>