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 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
如何构建一个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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
Smarty模板配置实例简析
2019/07/20 PHP
onpropertypchange
2006/07/01 Javascript
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
JS实现放烟花效果
2020/03/10 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
20招让你的Python飞起来!
2016/09/27 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
给我一面国旗 python帮你实现
2019/09/30 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
应聘自荐信
2013/12/14 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
本溪关门山导游词
2015/02/09 职场文书
通知函格式范文
2015/04/27 职场文书
六五普法心得体会2016
2016/01/21 职场文书
汽车销售合同文本
2019/08/08 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python