<!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. Rx

    more detailed in WIKI's document SDP :session description protocal book AAA AA-Answer 鉴权授权应答AAR AA-R ...

  2. 【后渗透】PowerSploit

    1.下载安装:git clone https://github.com/mattifestation/PowerSploit.git 2.搭建web服务器(如172.16.12.2),将powersp ...

  3. hive Tutorial

    hive数据单元按照粒度从大到小,依次为 1.数据库database:可以用show databases; 命令查看所有的数据库,并用use d1; 命令来选中d1数据库,接下来就可以操作d1数据库中 ...

  4. 解决GitHub下载很慢的问题

    此方法参照 github下载慢,轻松提速教程 1.获取github的IP地址.访问:https://www.ipaddress.com/ 网址依次获取以下三个网址的IP github.com gith ...

  5. 基于JQuery easyui，gson的批量新增/修改和删除-servlet版

    最近项目需要用到在页面进行批量操作,做了一些这方面的学习,参照网上的资料写了个小例子,记录一下: 准备 引入gson-2.6.2.jar,这里使用gson而不使用json-lib,原因是json-li ...

  6. golang io.ReadFull

    buf := make([]byte, 10, 10) file, _ := os.Open("./data.txt") n, err := io.ReadFull(file, b ...

  7. (转)nginx日志配置指令详解

    这篇文章主要介绍了nginx日志配置指令详解,nginx有一个非常灵活的日志记录模式,每个级别的配置可以有各自独立的访问日志,需要的朋友可以参考下日志对于统计排错来说非常有利的.本文总结了nginx日 ...

  8. Cookie跳转登录验证码

    对于web应用来说,大部分的系统在用户登录时都要求用户输入验证码,验证码的类型的很多,有字母数字的,有汉字的,甚至还要用户输入一条算术题的答案的, 对于系统来说使用验证码可以有效果的防止采用机器猜测方 ...

  9. 关于JS闭包

    今天在敲代码的时候,发现很多JQ插件在写闭包的时候都会用到下面的写法: (function ($) { ... })(jQuery); 一时的好奇心驱使,我研究起了这一写法来.大家都知道,在 $ 没有 ...

  10. MySql的索引操作

    索引是一种特殊的数据库结构,可以用来快速查询数据库表中的特定记录.索引是提高数据库性能的重要方式.MySQL中,所有的数据类型都可以被索引.MySQL的索引包括普通索引.唯一性索引.全文索引.单列索引 ...