HTML 练习拖动面板
<!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 练习拖动面板的更多相关文章
- JS / jquery 实现页面 面板拖动 QQ网页版登陆页面拖动
参考:慕课网DOM实践探秘 http://www.imooc.com/learn/138 实现需求:点击页面头部,可以拖动面板.使用js原生和jquery 各实现一次. 可以学到:1.鼠标在当前页面的 ...
- WPF-拖动面板移动窗口&设置窗口状态
在需要去掉窗口边框的情景下往往需要有拖动面板直接移动窗口和自定义按钮改变窗口状态和关闭的功能 拖动面板移动窗口 为面板控件添加MouseMove事件, 面板控件指的是用来当面板的控件,可以是grid. ...
- Jquery 实现层的拖动,支持回调函数
最近在写一个CMS内容管理系统,前台基本是用ajax异步请求服务器,通过ashx处理,返回json格式处理.由于需要更加人性化的界面,所以采用到了拖动层的操作. 以下是拖动层的主要核心方法,本来想写成 ...
- 十分钟玩转 jQuery、实例大全
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...
- 前端之jquery
前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...
- 【jquery】基础知识
jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...
- jquery简介和实例
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...
- JQurey
jQuery 是一个 JavaScript 库.极大地简化了 JavaScript 编程,很容易学习. jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML ...
- jQuery基本操作
jQuery简介 jQuery是一个兼容多浏览器的javascript库,极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多),对javasc ...
随机推荐
- Python学习 Part6:错误和异常
Python学习 Part6:错误和异常 两种不同类型的错误:语法错误和异常 1. 语法错误 语法错误,也被称作解析错误: >>> while True print('Hello w ...
- PAT1097:Deduplication on a Linked List
1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...
- Java Web之九九乘法表
NineTabs.jsp 1 <%@ page language="java" import="java.util.*" contentType=&quo ...
- c++ 输出精度
1 保留小数点后**位 cout.flags(ios::fixed); cout.precision(4); //设置输出精度,
- 计算器源码(数学式python)
''' ******************** 请计算表达式: 1 - 2 * ( (60-30 +(-40.0/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/1 ...
- Java公开课-05.log4j
log4j 一,log4j简介 1.如果程序中出现异常,我们怎么解决? 01.使用异常处理机制===>异常 (但是使用原则是,能不用异常处理机制,最好不用,怎么办?) 02.通过debug调试 ...
- Tar专题
下面的脚本根据当前的系统时间生成压缩文件名,并备份文件到指定目录: DIR=/www/webbackup/web/ FILE_NAME=`date +%y%m%d%H` FILE_NAME=$DIR/ ...
- bug排查小结
mysql cpu利用率偏高,并且长时间居高不下. show processlist 发现有一个单表查询的sql语句出现的频率比较高, 这个单表查询中规中矩,where语句中条件都使用”=“连接,再加 ...
- Java 实现 HttpClients+jsoup,Jsoup,htmlunit,Headless Chrome 爬虫抓取数据
最近整理一下手头上搞过的一些爬虫,有HttpClients+jsoup,Jsoup,htmlunit,HeadlessChrome 一,HttpClients+jsoup,这是第一代比较low,很快就 ...
- javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
前言 for,slice(0),concact() 在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝.如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不 ...