HTML 练习拖动面板
程序员文章站
2022-06-19 21:47:06
``` Title 标题 内容 ``` ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div style="border: 1px solid #ddd; width: 600px; position: absolute;">
<div id="title" style="background-color:black;height:40px; color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
</body>
<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).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+"px");
$(this).parent().css("top", new_parent_y+"px");
}).mouseup(function(){
$(this).off("mousemove")
})
})
</script>
</html>