关于js在一个固定的盒子里面拖拽的问题（包含临界值）
回武汉打卡第三天，武汉加油，逆战必胜！今天我们一起分享一下js拖拽的问题。
当然实现拖拽方法是有很多的，下面简单讲一种方法，大致思路如下：
首先需要用到的事件主要有 onmousedown，onmousemove，onmouseup。因为是小盒子(small)在拖拽拖拽，所以首先onmousedown是绑定在small小盒子上面；而拖拽是在文档中进行的，所以onmousemove和onmouseup可以写在文档对象上；
其次css在书写时记得使用定位，不要使用fixed（位置是相对于浏览器窗口的）
再次在鼠标按下的时候，计算鼠标在小盒子中的位置（鼠标的坐标 - 小盒子在文档中的坐标 - 大盒子的坐标）
然后在鼠标移动的过程中，计算小盒子距离左边的距离，也就是定位值（鼠标的坐标 - 鼠标在小盒子中的位置）
最后：判断临界值
最小临界值都是0
最大临界值：大盒子(big)的宽高 - 小盒子(small)的宽高
值得注意的是获取鼠标坐标有两种办法，一种是clientX,clientY;另外一种是pageX,pageY;在这里前者会有一定问题（比如闪烁），建议使用pageX,pageY
具体实现附代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;}
.big{width: 600px;height: 500px;background-color: #000;margin: 50px auto;position: relative;border:30px solid red;}
.small{width: 100px;height: 100px;background-color: #ff0;position: absolute;}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<script type="text/javascript">
window.onload = function(){
// 获取元素
var bigBox = document.querySelector(".big");
var sBox = document.querySelector(".small");
// 获取大盒子的大小
var bigbox_w = bigBox.offsetWidth;
var bigbox_h = bigBox.offsetHeight;
// 获取小盒子的大小
var sbox_w = sBox.offsetWidth;
var sbox_h = sBox.offsetHeight;
// 获取大盒子的间距
var bigBox_l = bigBox.offsetLeft;
var bigBox_t = bigBox.offsetTop;
// 小盒子鼠标按下才触发事件
sBox.onmousedown = function(ev){
ev = ev || window.event;
// 获取鼠标在盒子中的位置
var disX = ev.pageX - sBox.offsetLeft;
var disY = ev.pageY - sBox.offsetTop;
console.log(disX,disY)
// 鼠标在文档中移动
document.onmousemove = function(e){
e = e || window.event;
var moveX = e.pageX - disX;
var moveY = e.pageY - disY;
if(moveX < 0){
moveX = 0;
}
if(moveY < 0){
moveY = 0;
}
if(moveX > bigbox_w - sbox_w){
moveX = bigbox_w - sbox_w;
}
if(moveY > bigbox_h - sbox_h){
moveY = bigbox_h - sbox_h;
}
sBox.style.left = moveX + 'px';
sBox.style.top = moveY + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>
关于js在一个固定的盒子里面拖拽的问题（包含临界值）的更多相关文章
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- jquery实现行列的单向固定和列的拖拽
其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...
- 原生JS实现弹出窗口的拖拽
上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...
- 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮
一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高 ...
- Hammer.js 实现移动端元素的拖拽库
1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...
- 利用插件（jQuery-ui.js）实现表格行的拖拽排序
template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...
- js实现弹出框的拖拽
//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...
- js基础 -----鼠标事件(按下 拖拽)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js 禁止右击保存图片，禁止拖拽图片
禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...
随机推荐
- 【DPDK】谈谈DPDK如何实现bypass内核的原理 其一 PCI设备与UIO驱动
[前言] 随着网络的高速发展,对网络的性能要求也越来越高,DPDK框架是目前的一种加速网络IO的解决方案之一,也是最为流行的一套方案.DPDK通过bypass内核协议栈与内核驱动,将驱动的工作从内核态 ...
- Python基础-求两个字符串最长公共前轴
最长公共前缀,输入两个字符串,如果存在公共前缀,求出最长的前缀,如果没有输出no.如“distance”和“discuss”的最长公共前缀是“dis”. s1 = input('请输入第1个字符串-- ...
- vue中v-if和v-show的区别
v-if.v-show顾名思义就是用来判断视图层展示效果的. v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回真值的时候被渲染. v-show 指的是单纯的切换元素的样式dis ...
- 回想笔记 瞎比比 域名注册 解析绑定ip 下载证书 设置证书 重定向http到https请求
2019.7.27 回想笔记 拥有腾讯云服务器一台 阿里云注册5元域名,进行备案 完成之后 使用解析 绑定服务器ip地址 ,使用域名可以访问到web服务器而不是通过直接暴露ip地址进行访问 证书购买 ...
- Asp.Net Core 2.0实现HttpResponse中繁切换
随笔背景:因为项目中有个简单的功能是需要实现中文简体到繁体的切换,数据库中存储的源数据都是中文简体的,为了省事就想着通过HttpHeader的方式来控制Api返回对应的繁体数据. 实现方式:通过Asp ...
- 04-influxdb基本操作
influxdb基本操作 1. 数据库基本操作 # 创建数据库 > create database db01; # 查看数据库 > show databases; name: databa ...
- SSL/TLS 协议运行机制概述（一）
SSL/TLS 协议运行机制概述(一) SSL/TLS 发展史 1994年,NetScape 设计了SSL协议(Secure Sockets Layer) 1.0,未正式发布 1995年,NetSca ...
- （转）GNU风格ARM汇编语法指南（非常详细）4
原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201011148226622/ 4.GNU汇编语言定义入口点 汇编程序的缺省入口是_sta ...
- treeselect 异步拿到数据后 要经过一个过滤 然后放入options 否则组件会崩溃
事件缘由:由于城市树会反复调用,所以不用api每次调用,改用数据缓存一次读取,各处使用.然后我把调用的数据放入treeselect,发现组件就崩溃了,但是api读取的数据就没问题. 查看不是props ...
- Java多线程并发04——合理使用线程池
在此之前,我们已经了解了关于线程的基本知识,今天将为各位带来,线程池这一技术.关注我的公众号「Java面典」了解更多 Java 相关知识点. 为什么使用线程池?线程池做的工作主要是控制运行的线程的数量 ...