鼠标事件-拖拽（不能拖出窗口的div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2 {
width: 150px;
height: 150px;
position: absolute;
background: #CCCCCC;
}
</style>
<script>
window.onload = function() {
var div2 = document.getElementById('div2');
var x = 0;
var y = 0;
document.onmousedown = function(ev) {
var oEvent = ev || event;
//x、y分别代表，鼠标与div之间的横坐标和纵坐标
x = oEvent.clientX - div2.offsetLeft;
y = oEvent.clientY - div2.offsetTop;
document.onmousemove = function(ev) {
var oEvent = ev || event;
//m、n分别代表div的横、纵坐标
var m = oEvent.clientX - x;
var n = oEvent.clientY - y;
//下面两个if else 阻止div飞出页面
if(m < 0){
m = 0;
}
//document.documentElement.clientWidth获取整个页面的宽度
else if(m > (document.documentElement.clientWidth - div2.offsetWidth)){
m = document.documentElement.clientWidth - div2.offsetWidth;
}
if(n < 0){
n =0;
}
else if(n > (document.documentElement.clientHeight - div2.offsetHeight)){
n = document.documentElement.clientHeight - div2.offsetHeight;
}
//设置div的坐标
div2.style.left = m + 'px' ;
div2.style.top = n + 'px';
};
document.onmouseup = function(ev){
var oEvent = ev || event;
//释放move事件，如果不释放，放开鼠标后，div仍然会跟随鼠标移动
document.onmousemove = null;
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="div2"></div>
</body>
</html>
鼠标事件-拖拽（不能拖出窗口的div）的更多相关文章
- dragView 屏幕拖拽并且弹出菜单的控件
dragView 因项目新需求需要添加一个屏幕拖拽按钮可以弹出菜单的控件,因为不是我做的闲来无事写一个demo吧 可能存在一些小bug(毕竟就写了几个小时)兄弟姐妹们理解思路就行 具体的可以自己调试一 ...
- WPF拖拽文件(拖入拖出)，监控拖拽到哪个位置，类似百度网盘拖拽
1.往wpf中拖文件 // xaml <Grid x:Name="grid_11" DragOver="Grid_11_DragOver" Drop=&q ...
- H5拖拽 构造拖拽及缩放 pdf展示
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- H5拖拽 构造拖拽及缩放 pdf文件转换为html预览
前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...
- JS拖拽-面向对象拖拽-继承
//普通拖拽 /* * CSS */ #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move; ...
- react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）
表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...
- Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息
var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...
- html禁止图片拖拽移动在新窗口打开
一直觉得直接从网站的表格上复制数据挺方便的, 今天,领导突然说网站上的图片可以被别人拖走了,必须禁止,哎,果然只有领导才考虑得到这种事情啊 so, 将ondragstart="return ...
- js2：事件的学习，弹出窗口，状态栏字改变，地图热点的使用
原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...
随机推荐
- df -h 卡死 如何解决
df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...
- 比较 GET 与 POST
post比get安全 get请求方法向url添加数据 全部用POST不是十分合理,最好先把请求按功能和场景分下类, 对数据请求频繁,数据不敏感且数据量在普通浏览器最小限定的2k范围内,这样的情况使用 ...
- [转] vagrant学习笔记 - provision
[From] https://blog.csdn.net/54powerman/article/details/50684844 从字面上来看,provision是准备,实现的功能是在原生镜像的基础 ...
- 使用 json_serializable (flutter packages pub run build_runner build) 问题
命令: flutter packages pub run build_runner build 使用 build_runner 生成 .g.dart 文件 flutter packages pub r ...
- storm（4）-topology的组成-stream/spout/blot/
topology包含:stream.spout.blot. topology会一直运行,除非进程被杀死. 1.stream stream=tuple=event(CEP中的)=发送的报文.键值对(一个 ...
- 转 crs damon can't start 2个例子
###sample 1 "node 1 (10.198.127.5): ps -ef|grep ora.crsd root 45613166 47185944 0 10:24:35 pts/ ...
- Windows操作系统的发展简介
一.简介 Microsoft Windows,是美国微软公司研发的一套操作系统,它问世于1985年,起初仅仅是Microsoft-DOS模拟环境,后续的系统版本由于微软不断的更新升级,不但易用, ...
- 文献综述十五：基于b/s中小型超市进销存管理系统的研究与设计
一.基本信息 标题:基于b/s中小型超市进销存管理系统的研究与设计 时间:2015 出版源:湘西财经大学 文件分类:对超市管理系统的研究 二.研究背景 在竞争日益激烈的行业中,尽可能降低运营成本,逐步 ...
- fish shell version
如果你使用 fish shell, 想要自己定义变量,或者函数,或者alias, 不要使用 version 这个名字, 因为,version 这个名字 被 fish 本身占了.... ...
- 配置idea解决乱码
在项目开发过程中,我们一般希望在修改完代码之后不重启项目即可提现出修改的结果,那么热部署项目就显得十分必要了.在idea中将项目热部署至tomcat中的方法如下: 首先打开tomcat配置界面,在se ...