回武汉打卡第三天，武汉加油，逆战必胜！今天我们一起分享一下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. LeetCode 33.Search in Rotated Sorted Array（M）

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...

  2. js中的this和arguments.callee

    this和 arguments.callee this 全局作用域下,this指向Window 其他情况下,谁调用this就指向谁 console.log(this) //对调用就指向谁系列 func ...

  3. Anroid关于fragment控件设置长按事件无法弹出Popupwindows控件问题解决记录

    一.问题描述     记录一下最近在安卓的gragment控件中设置长按事件遇见的一个坑!!!     在正常的activity中整个活动中设置长按事件我通常实例化根部局,例如LinearLayout ...

  4. 一套代码同时支持.NET Framework和.NET Core

    转自:https://www.cnblogs.com/tianqing/p/11614303.html 在.NET Core的迁移过程中,我们将原有的.NET Framework代码迁移到.NET C ...

  5. PHP把图片存入数据库（非路径）【待测试】

    大部分人的图片上传都是保存一个路径到数据库,这样在插入时确实快,也符合web的特点,但是在删除时就很麻烦,需要找到文件并删除,该代码能够把代码直接存入数据库,删除时一并删除.请注意:这样的话数据库大小 ...

  6. Unsafe中CAS的实现

    前言 Unsafe 是位于 sun.misc 包下的一个类.Unsafe 提供的 API 大致可分为内存操作.CAS.Class 相关.对象操作.线程调度.系统信息获取.内存屏障.数组操作等几类.由于 ...

  7. nginx升级不改变配置文件

    查看当前版本是:1.10.3 [root@proxy nginx-1.10.3]# /usr/local/nginx/sbin/nginx -Vnginx version: nginx/1.10.3b ...

  8. Leetcode 1160: 拼写单词

    给你一份『词汇表』(字符串数组) words 和一张『字母表』(字符串) chars. 假如你可以用 chars 中的『字母』(字符)拼写出 words 中的某个『单词』(字符串),那么我们就认为你掌 ...

  9. GO系列 | 5分钟入门GO【译】

    什么是Google Go? Google Go是由Robert Griesmer,Rob Pike和Ken Thompson在Google设计的一种开源编程语言. Go在语法上类似于C语言: 除了内存 ...

  10. Ansible Ad-Hoc与常用模块

    ansible 执行结果信息–各颜色说明:ansible Ad-Hoc 说明:ansible 如何查看帮助文档与常用模块详解 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有 ...