<!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级算法第三次上机-B.Bamboo和巧克力工厂

    B Bamboo和巧克力工厂 分析 三条流水线的问题,依然是动态规划,但是涉及的切换种类比较多.比较易于拓展到n条流水线的方式是三层循环,外层是第k个机器手,里面两层代表可切换的流水线 核心dp语句: ...

  2. 1.Bootstrap简介

    Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...

  3. mybatis的CRUD实例(三)

    前面的文章我们已经实现了根据id查询用户信息的功能,下面我们进行其他业务功能的实现. 一.根据用户名模糊查询用户列表 查询使用的sql : select * from user where usern ...

  4. hadoop job -kill 和 yarn application -kill 区别

    hadoop job -kill 调用的是CLI.java里面的job.killJob(); 这里会分几种情况,如果是能查询到状态是RUNNING的话,是直接向AppMaster发送kill请求的.Y ...

  5. python函数参数类型及其顺序

    根据inspect模块官文文档中关于函数参数类型的相关说明,python函数参数共有五种类型,按顺序分别为:POSITIONAL_ONLY.POSITIONAL_OR_KEYWORD.VAR_POSI ...

  6. DES加密之强制更新下载分离器

    数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...

  7. svn: Failed to run the WC DB work queue associated svn的bug解决

    第一步,下载sqlite 官方网址  :https://www.sqlite.org/download.html 第二步:解压放在c盘 第三步:配置环境变量 第四步:找到工作空间的.svn文件,cmd ...

  8. vue过渡效果

    vue过渡效果. <transition name='slide-fade'> <div class="top" @click='gotoTop' v-if='s ...

  9. vue-webpack项目中调试的问题

    在使用devtools的过程中,可以使用debugger.

  10. Delphi对Word的基本操作

    一.Delphi程序启动Word 采用CreateOleObjects的方法来启动Word,调用VBA代码,具体实现过程为: 首先使用GetActiveOleObject('Word.Applicat ...