<!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）的更多相关文章

  1. dragView 屏幕拖拽并且弹出菜单的控件

    dragView 因项目新需求需要添加一个屏幕拖拽按钮可以弹出菜单的控件,因为不是我做的闲来无事写一个demo吧 可能存在一些小bug(毕竟就写了几个小时)兄弟姐妹们理解思路就行 具体的可以自己调试一 ...

  2. WPF拖拽文件(拖入拖出)，监控拖拽到哪个位置，类似百度网盘拖拽

    1.往wpf中拖文件 // xaml <Grid x:Name="grid_11" DragOver="Grid_11_DragOver" Drop=&q ...

  3. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  4. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  5. JS拖拽-面向对象拖拽-继承

    //普通拖拽 /* * CSS */ #div1{ width:100px; height:100px; position:absolute; background:red; cursor:move; ...

  6. react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）

    表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...

  7. Extjs4.2如何实现鼠标点击统计图时弹出窗口来展示统计的具体列表信息

    var pageSize = 20;//初始化每页数据条数 var winTitle = '';//初始化窗口标题 /** *点击统计图时,弹出一个窗口,显示统计的详情列表信息, *该方法为项目中所有 ...

  8. html禁止图片拖拽移动在新窗口打开

    一直觉得直接从网站的表格上复制数据挺方便的, 今天,领导突然说网站上的图片可以被别人拖走了,必须禁止,哎,果然只有领导才考虑得到这种事情啊 so, 将ondragstart="return ...

  9. js2：事件的学习，弹出窗口，状态栏字改变，地图热点的使用

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>js</title> & ...

随机推荐

  1. 2016级算法第一次练习赛-E.AlvinZH的儿时回忆——蛙声一片

    864 AlvinZH的儿时回忆----蛙声一片 题目链接:https://buaacoding.cn/problem/865/index 思路 中等题.难点在于理解题意!仔细读题才能弄懂题目规则.整 ...

  2. Scrapy 抓取股票行情

    安装scrapy会出现错误,我们选择anaconda3作为编译环境,搜索scrapy安装(有错误自查) 创建scrapy爬虫项目: 调出cmd,到相应目录:输入: scrapy startprojec ...

  3. SpringMVC的JSP页面中中EL表达式不起作用的问题解决

    原文地址:https://blog.csdn.net/sinat_35512245/article/details/53611663

  4. oracle安装注意

    安装环境:widows7相关教程:https://jingyan.baidu.com/article/4d58d5411e16de9dd4e9c0ec.html oracle安装情况:标准版2.8Go ...

  5. java操作html格式数据

    近期在做数据抓取功能,抓取到的数据为html格式,需在后台进行转换后取值,为了避免使用字符串查找方式获取而使用Jsonp完美实现. 1. 引入Jsonp: <dependency> < ...

  6. [原创]VMware Workstation 14.1.3 Pro安装CentOS_7.6.1810

    前言 Linux作为最主流的服务器操作系统,在市场上的使用占比保持着领先对位.其中CentOS作为基于Red Hat Linux 提供的可自由使用源代码的企业级Linux发行版本,在企业的服务器中,也 ...

  7. 榨取kkksc03 多维dp

    榨取kkksc03 多维dp 题面:洛谷 P1855 榨取kkksc03 一道简单的动态规划,背包再加一维费用,首先可以易得三维动态规划转移方程 \[ dp[i][j][w]=\left\{ \beg ...

  8. SpringBoot读取静态资源文件

    ClassPathResource resource = new ClassPathResource(publicKeyCer); File file = null; try { file = res ...

  9. pip升级最新版本

    1.如果是python2.7输入以下指令 python -m pip install --upgrade pip 2.如果是python 3.+输入以下指令 python3 -m pip instal ...

  10. FastDFS安装、配置、部署（一）－安装和部署 (转)

    FastDFS是一个开源的,高性能的的分布式文件系统,他主要的功能包括:文件存储,同步和访问,设计基于高可用和负载均衡,FastDFS非常适用于基于文件服务的站点,例如图片分享和视频分享网站 Fast ...