鼠标事件-拖拽2（不能拖出指定对象的div）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2 {
width: 150px;
height: 150px;
position: absolute;
background: #CCCCCC;
}
#div3{
width: 600px;
height: 500px;
position: absolute;
background: #2A6496;
}
</style>
<script>
window.onload = function() {
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
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;
}
//限制div2移出div3的右端
else if(m > (div3.offsetWidth - div2.offsetWidth)) {
m = div3.offsetWidth - div2.offsetWidth;
}
if(n < 0) {
n = 0;
} else if(n > (div3.offsetHeight - div2.offsetHeight)) {
n = div3.offsetHeight - 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="div3">
<div id="div2"></div>
</div>
</body>
</html>
鼠标事件-拖拽2（不能拖出指定对象的div）的更多相关文章
- iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 鼠标事件-拖拽（不能拖出窗口的div）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- element-ui dialog组件添加可拖拽位置 可拖拽宽高
edge浏览器下作的gifhttp://www.lanourteam.com/%E6... 有几个点需要注意一下 每个弹窗都要有唯一dom可操作 指令可以做到 拖拽时要添加可拖拽区块 header 由 ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 卡片拖拽（vue拖拽事件）
<template> <div class="wrapper wrapper-content" id="main" v-cloak> & ...
- day50—JavaScript鼠标拖拽事件
转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
随机推荐
- IDEA 笔记汇总
Intellij IDEA 像eclipse那样给maven添加依赖 Intellij idea maven 引用无法搜索远程仓库的解决方案 Intellij IDEA 封装Jar包(提示错误: 找不 ...
- Python 全栈开发：day3 作业与默写
# 1.有变量name = "aleX leNb" 完成如下操作:name = 'aleX leNb'# 1)移除 name 变量对应的值两边的空格,并输出处理结果print(na ...
- ArduinoNano卡在上传，无法烧录
卡在“上传...”.过了很久被告知失败. 上午在开发版管理器中将Arduino AVR Boards从1.6.20升级到1.6.22,出现这个问题. 再安装回1.6.20,问题未被解决. 查阅资料无果 ...
- fiddler安装和使用
App抓包原理 客户端向服务器发起HTTPS请求 抓包工具拦截客户端的请求,伪装成客户端向服务器进行请求 服务器向客户端(实际上是抓包工具)返回服务器的CA证书 抓包工具拦截服务器的响应,获取服务器证 ...
- 【文档】一、Mysql Binlog概述
Binlog是一系列日志文件,他们包含的内容是Mysql数据内容的改变.如果想开启binlog功能,需要在启动时带上--log-bin参数. binlog是从Mysql3.23.14版本开始的.它包含 ...
- hibernate配置hbm2ddl.auto的四个参数
<!-- Drop and re-create the database schema on startup --> <!-- hbm(hibernatemapping) ,ddl( ...
- h2数据库的简单使用
1.登录H2数据库的WebConsole控制台 2.设置数据库连接 3.连接测试通过之后,点击[连接]按钮,登录到test数据库的webConsole 4.创建表 复制H2数据库提供的样例SQL脚本, ...
- ECharts概念学习系列之ECharts的下载和安装（图文详解）
不多说,直接上干货! http://echarts.baidu.com/download.html 前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网 ...
- 使用单体模式设计原生js插件
----------基于上次写的jquery插件进行改造 http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery ...
- applets
Java Applet 可以大大提高Web页面的交互能力和动态执行能力.包含Applet的网页被称为Java-powered页,可以称其为Java支持的网页. Applet 当用户访问这样的网页时,A ...