关于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 ...
随机推荐
- 关于Html+css阶段学习总结
一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...
- GitHub 热点速览 vol.10：疫情下的 GitHub
作者:HelloGitHub-小鱼干 摘要:如果说上周的 GitHub 是股市附体 star 低迷不振,那么本周的 GitHub 像极了受到疫情影响而未开学的高校们,新生 GitHub 项少,能上 G ...
- 【已解决】HDFS节点已经启动，但不能访问50070 ？
问题描述 通过start-dfs.sh启动了三个节点 但无法通过IP访问50070端口 问题分析 1.可能是防火墙没关,被拦截了 果然,防火墙没关 再将防火墙设为开机不启动 systemctl dis ...
- 内网渗透之跨边界传输 - 反弹shell
大年初一,当然是更一篇重磅文章啦 反弹shell /bin目录下带sh的都是shell nc 1.正向连接,目标机监听自身端口,攻击机主动建立连接 目标机:nc -lvvp 端口 -e /bin/ba ...
- django models中字段
AutoField:一个自动递增的整型字段,添加记录时它会自动增长.你通常不需要直接使用这个字段:如果你不指定主键的话,系统会自动添加一个主键字段到你的model.(参阅自动主键字段) Boolean ...
- 网络编程---socket模块
内容中代码都是先写 server端, 再写 client端 1 TCP和UDP对比 TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效 ...
- [项目分享]JSP+Servlet+JDBC实现的学生信息管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/liu_xu111/JavaWeb01 这次分享一个学生管理系统,我感觉这是程序员在大学时期的毕设和课程设计选择最多 ...
- isEmpty 判空函数 内部分别判断是 null 空数组 等
import { oneOf, isEmpty } from '@/libs/tools' export const isEmpty = (value) => { if (value == nu ...
- C#读取静态类常量属性和值
1.背景最近项目中有一个需求需要从用户输入的值找到该值随对应的名字,由于其它模块已经定义了一份名字到值的一组常量,所以想借用该定义.2.实现实现的思路是采用C#支持的反射.首先,给出静态类中的常量属性 ...
- 洛古 P1312 Mayan游戏（dfs+剪枝）
题目链接 这道题和俄罗斯方块很像 很明显,我们可以看出这是一个dfs,但是,我们需要几条剪枝: 1.如果只剩下1个或2个同样颜色的方块,那么直接退出 2.相同的块不用交换 3.注意优先性,优先左边换右 ...