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

  1. iPhone手机解锁效果&&自定义滚动条&&拖拽--Clone&&窗口拖拽（改变大小/最小化/最大化/还原/关闭）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 鼠标事件-拖拽（不能拖出窗口的div）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

    被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...

  4. element-ui dialog组件添加可拖拽位置 可拖拽宽高

    edge浏览器下作的gifhttp://www.lanourteam.com/%E6... 有几个点需要注意一下 每个弹窗都要有唯一dom可操作 指令可以做到 拖拽时要添加可拖拽区块 header 由 ...

  5. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

  6. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. 卡片拖拽（vue拖拽事件）

    <template> <div class="wrapper wrapper-content" id="main" v-cloak> & ...

  8. day50—JavaScript鼠标拖拽事件

    转行学开发,代码100天——2018-05-05 今天通过鼠标拖拽事件复习巩固一下鼠标事件. 鼠标拖拽事件需要记住两点: 1.距离不变 2.鼠标事件(按下,移动,抬起) <div id=&quo ...

  9. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

随机推荐

  1. windows 域的安装方法

    前面的博客中我们知道了 Windows AD域的升级,下面我谈谈Windows域的安装和卸载. 卸载AD域 配置备份AD域 安装子域 删除子域(必须在根域管理员模式下删除,否则无法删除) 删除命令 导 ...

  2. 使用selenium的WebDriver和ChromeDriver实现UI自动化

    下载chromedriver chromedriver与chrome的对应关系表:http://blog.csdn.net/huilan_same/article/details/51896672 下 ...

  3. Python基础部分的疑惑解析（2）

    变量: 变量名由 字母.数字.下划线构成,数字不能做为开头 不能用关键字:另外一些内置的方法也别用 推荐使用下划线命名间两个单词user_id 变量在最后底层处理的时候没什么意义,但是在命名的时候有利 ...

  4. shell-008:检测502

    检测502的方法有多种 1.curl他的状态码(不建议,会对网站造成不必要的访问和多余的日志输出) 2.可以直接检测访问日志 下面用while做成一个死循环监控日志502的状态 #!/bin/bash ...

  5. 问题 I: 闪闪发光

    [提交] [状态] [命题人:外部导入] 题目描述 一所位于云南昆明的中医药本科院校--云南中医学院. 因为报考某专业的人数骤减,正面临着停招的危机. 其中有九名少女想到一条妙计——成为偶像, 只要她 ...

  6. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  7. 几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较

    几种流行的开源WebService框架Axis1,Axis2,Xfire,CXF,JWS比较 来源   XFire VS Axis XFire是与Axis2 并列的新一代WebService平台.之所 ...

  8. golang-开发配置

    环境变量配置 Windows GOROOT GOROOT = D:\ProgramDev\Go GOROOT GOROOT = D:\WorkSpace\goProjects GOBIN GOBIN ...

  9. MYSQL的NOW和SYSDATE函数的区别

    在MySQL Performance Blog博客上看到一篇文章介绍now()和sysdate()函数. 想起很多朋友专门问在MySQL里面提供now()和sysdate()函数,都是表示取得当前时间 ...

  10. [中英对照]The Art Of Reporting Bugs | 报bug的艺术

    前言:因为最近要给兄弟Team分享一下如何有效地报告bug, 故多做一做功课.下面给出一篇博客的中英文对照翻译. The Art Of Reporting Bugs | 报bug的艺术 My init ...