回武汉打卡第三天，武汉加油，逆战必胜！今天我们一起分享一下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在一个固定的盒子里面拖拽的问题（包含临界值）的更多相关文章

  1. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  2. jquery实现行列的单向固定和列的拖拽

    其实这些功能在PL/SQL Dev中都有实现,在页面中还是蛮常见的. 我实现列的单向固定的原理:将需要单向固定的列放在一个<table>标签中,而整体的数据放在另一个<table&g ...

  3. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  4. 前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

    一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高 ...

  5. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

  6. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  7. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

  8. js基础 -----鼠标事件(按下 拖拽)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. js 禁止右击保存图片，禁止拖拽图片

    禁止鼠标右键保存图片 <img src="" oncontextmenu="return false;"> 禁止鼠标拖动图片 <img src ...

随机推荐

  1. JS对象之封装（二）

    JS 对象封装的常用方式 1.常规封装 function Person (name,age){ this.name = name; this.age = age; } Pserson.prototyp ...

  2. 基础JavaScript练习（三）总结

    任务目的 实践JavaScript数组.字符串相关操作 任务描述 基于任务四进行升级 将新元素输入框从input改为textarea 允许一次批量输入多个内容,格式可以为数字.中文.英文等,可以通过用 ...

  3. 在windows上极简安装GPU版AI框架(Tensorflow、Pytorch)

    在windows上极简安装GPU版AI框架 如果我们想在windows系统上安装GPU版本的AI框架,比如GPU版本的tesnorflow,通常我们会看到类似下面的安装教程 官方版本 安装CUDA 安 ...

  4. blender 2.8 [学习笔记-04] 编辑模式-网格拆分

    在编辑模式下

  5. Java Opencv 实现 中值滤波器

    原理 Note 以下原理来源于Richard Szeliski 的著作 Computer Vision: Algorithms and Applications 以及 Learning OpenCV ...

  6. 快速上手 Python 命令行模块 Click

    关于Click? 说下 Click 模块是干啥的,简单说,它就是把我们的 Python 脚本的一些函数,通过 添加带有 Click 关键字的装饰器进行装饰进而将函数调用的形式转化为命令行传参的形式然后 ...

  7. iview中select搜索

    https://www.jianshu.com/p/1c40d7cc440e https://www.cnblogs.com/yun1108/p/10967735.html https://blog. ...

  8. javascript设计模式和开发实践（阶段一）

    1,设计模式的作用:让人们写出可复用和可维护性高的程序,代价可能是,额外增加代码量: 比较形象的例子:空房间里面放东西,如果日复一日的往里面扔东西,时间久了,很难找到自己想要的东西,调整也不容易,但是 ...

  9. 使用NPOI将Excel表导入到数据库中

    public string ExcelFile() { //指定文件路径, string fileName=@"d:\Stu.xls"; //创建一个文件流,并指定其中属性 usi ...

  10. 超级干货：动态防御WAF技术原理及编程实战！

    本文带给大家的内容是动态防御WAF的技术原理及编程实战. 将通过介绍ShareWAF的核心技术点,向大家展示动态防御的优势.实现思路,并以编程实战的方式向大家展示如何在WAF产品开发过程中应用动态防御 ...