鼠标事件-拖拽（不能拖出窗口的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> & ...
随机推荐
- jenkins定时
分别的定义为:分 时 天 月 星期 Minutes within the hour (0–59) HOUR Thehour of the day (0–23) DOM Th ...
- Sum(欧拉降幂+快速幂)
Input 2 Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input file consists of multiple test cas ...
- /data/tomcat8/bin/setenv.sh
--问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...
- MVC返回数据流，ajax接受并保存文件
js代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- KB4284826 远程桌面发生身份验证错误，要求的函数不受支持
win -r -> run -> gpedit.msc 链接:https://www.zhangfangzhou.cn/authentication-error.html远程桌面发生 ...
- pip安装Python依赖环境
将包依赖信息保存在requirements.txt文件 pip freeze > requirements.txt 根据依赖文件安装依赖 pip install -r requirements. ...
- jQuery示例 | 分级菜单
<!DOCTYPE html> Title .header{ background-color: black; color: wheat; } .content{ min-height: ...
- mojing手柄遥杆控制
using UnityEngine; using UnityEngine.UI; using System.Collections; using MojingSample.CrossPlatformI ...
- EntityFramework6 版本更变产生的错误
LINQ to Entities does not recognize the method 'System.Nullable`1[System.Int32] DiffMinutes(System.N ...
- 2.2、js基础---预解析和严格模式
一.语言特性 1.预解析:js会把变量的声明(仅仅是声明)提到顶部,但是不会突破作用域. alert(a);var a= 12; //结果,undefi ...