js实现磁性吸附的示例


Posted in Javascript onOctober 26, 2020

磁性吸附

目录

  • 代码实例
  • 与限定范围拖拽的差异
  • 下载源码链接  

代码实例

* {
 padding: 0;
 margin: 0;
}
#box1 {
 width: 500px;
 height: 500px;
 background: #999;
 position: relative;
 left: 100px;
 top: 100px;
}
#box {
 width: 100px;
 height: 100px;
 background: #334;
 position: absolute;
 cursor: move;
}

<div id="box1">
<div id="box"></div>
</div>

(function () {
 var dragging = false
 var boxX, boxY, mouseX, mouseY, offsetX, offsetY
 var box = document.getElementById('box')
 var box1 = document.getElementById('box1')

 // 鼠标按下的动作
 box.onmousedown = down
 // 鼠标的移动动作
 document.onmousemove = move
 // 释放鼠标的动作
 document.onmouseup = up

 // 鼠标按下后的函数,e为事件对象
 function down(e) {
 dragging = true

 // 获取元素所在的坐标
 boxX = box.offsetLeft
 boxY = box.offsetTop

 // 获取鼠标所在的坐标
 mouseX = parseInt(getMouseXY(e).x)
 mouseY = parseInt(getMouseXY(e).y)

 // 鼠标相对元素左和上边缘的坐标
 offsetX = mouseX - boxX
 offsetY = mouseY - boxY
 }

 // 鼠标移动调用的函数
 function move(e){
 if (dragging) {
  // 获取移动后的元素的坐标
  var x = getMouseXY(e).x - offsetX
  var y = getMouseXY(e).y - offsetY

  // 计算可移动位置的大小, 保证元素不会超过可移动范围
  // 此处就是父元素的宽度减去子元素宽度
  var width = box1.clientWidth - box.offsetWidth
  var height = box1.clientHeight - box.offsetHeight

  // min方法保证不会超过右边界,max保证不会超过左边界
  x = Math.min(Math.max(0, x), width)
  y = Math.min(Math.max(0, y), height)

  // 磁性吸附部分
  if (x < RANGE) {x = 0}
  if (width - x < RANGE) {x = width}
  if (y < RANGE) {y = 0}
  if (height - y < RANGE) {y = height}

  // 给元素及时定位
  box.style.left = x + 'px'
  box.style.top = y + 'px'
 }
 }

 // 释放鼠标的函数
 function up(e){
 dragging = false
 }

 // 函数用于获取鼠标的位置
 function getMouseXY(e){
 var x = 0, y = 0
 e = e || window.event

 if (e.pageX) {
  x = e.pageX
  y = e.pageY
 } else {
  x = e.clientX + document.body.scrollLeft - document.body.clientLeft
  y = e.clientY + document.body.scrollTop - document.body.clientTop
 }
 return {
  x: x,
  y: y
 }
 }
})()

与限定范围拖拽的差异

添加磁性吸附部分

// 磁性吸附部分
if (x < RANGE) {x = 0}
if (width - x < RANGE) {x = width}
if (y < RANGE) {y = 0}
if (height - y < RANGE) {y = height}

下载源码链接

星辉的Github

以上就是js实现磁性吸附的示例的详细内容,更多关于js实现磁性吸附的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
div模拟滚动条效果示例代码
Oct 16 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
vue实现单一筛选、删除筛选条件
Oct 26 #Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 #Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 #Javascript
原生js实现贪吃蛇游戏
Oct 26 #Javascript
You might like
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
分享PHP守护进程类
2015/12/30 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
Python入门篇之数字
2014/10/20 Python
python实现合并两个数组的方法
2015/05/16 Python
python冒泡排序简单实现方法
2015/07/09 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python实现NB-IoT模块远程控制
2018/06/20 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python 实用工具状态机transitions
2020/11/21 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
Java平台和其他软件平台有什么不同
2015/06/05 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
高中家长寄语
2014/04/02 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
二年级小学生评语
2014/04/21 职场文书