<!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>
HTML 练习拖动面板
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:HTML 练习显示隐藏
下一篇:HTML 练习on方法
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Html 拖动 和 React 拖动
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8" /> <title>拖动</title> <style> #range { px; margin: 10px.
html react.js javascript jquery ico -
HTML元素的拖动
对于ondrop,ondragover和ondragstart这个几个事件是用于HTML将元素拖动的问题,元素拖动现
元素拖动 javascript html 脚本语言 -
《图解HTML练习》-练习标签
文字段落文字段落练习一<h1>一级标题</h1> <!--一级标题--><h2>二级标题</h2> <!--二级标题--><h3>三级标题</h3> ...
html elementui webview vue.js css -
html progress无法拖动 html 拖拽
问题来源: 需要做一个拖动的效果,要将本地的内容,拖到一个div中,然后进行上传。知识补充: 首先先来认识一下最简单的拖拽的思想。 开始拖拽 = 鼠标按下 + 移动 停止拖拽 = 鼠标弹起
html progress无法拖动 html5 拖拽 API Text -
altas(ajax)控件(九):可拖动面板DragPanel
使用非常简单: 用鼠标拖动 ...
ajax 3d 标题栏 asp.net