js实现磁性吸附的示例

2024-09-27 13:35:19

磁性吸附

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

代码实例

* {
 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实现磁性吸附的资料请关注我们其它相关文章！

原生js实现贪吃蛇游戏

原生JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下代码: <script> var timer = null; var oMain = document.getElementById("main"); function Map(atom,xnum,ynum){//地图,设置单位大小,及根据单位大小创建地图 this.atom = atom; this.xnum = xnum; this.ynum = ynum; this.create = func
js 压缩图片的示例（只缩小体积，不更改图片尺寸）

本文作者:Marydon 原文链接:https://www.cnblogs.com/Marydon20170307/p/11486511.html 1.情景展示如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="ima
javascript动画之磁性吸附效果篇

前面的话上一篇,我们介绍了javascript动画之模拟拖拽效果篇.但在实际应用中,常常需要为拖拽的元素限定范围.而通过限定范围,再增加一些辅助的措施,就可以实现磁性吸附的效果范围限定如果我们限定元素只可以在可视范围内移动,那么就需要对其进行范围限定首先,先要搞清楚是可视区域限定被拖拽元素左侧范围L0 = 0 右侧范围R0 = document.documentElement.clientWidth 上侧范围T0 = 0 下侧范围B0 = document.documentElemen
js关闭当前页面(窗口)的几种方式总结

1. 不带任何提示关闭窗口的js代码复制代码代码如下: <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> 2.自定义提示关闭复制代码代码如下: <script language="javascript">// 这个脚本是 ie6和ie7 通用的脚本function custom_close(){if
Json对象与Json字符串互转(4种转换方式)

1>jQuery插件支持的转换方式: 复制代码代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器: 复制代码代码如下: JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换
js刷新页面方法大全

如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过"前
JS中setTimeout()的用法详解

setTimeout setTimeout 语法例子用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co
JS删除数组里的某个元素方法

删除数组指定的某个元素首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; 然后使用通过得到这个元素的索引,使用js数组自己固有的函数去删除这个元素: 代码为: Array.prototype.remove
js 将json字符串转换为json对象的方法解析

例如: JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象: var str2 = { "name": "cxh", "sex": "man" }; 一.JSON字符串转换为JSON对象要使用上面的str1,必须使用下面的方法先转化为JSON对象: //由JSON字符串转换为
js实现磁性吸附的示例

磁性吸附目录代码实例与限定范围拖拽的差异下载源码链接代码实例 * { 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: m
JS实现按钮添加背景音乐示例代码

1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"
JS鼠标滚动分页效果示例

首先先看问题: 在开发的时候,看到这种现象就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑经过一番思考,和百度思路来了: 需要了解三个dom元素,
原生js封装运动框架的示例讲解

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子如下代码: #div{ width: 100px; height: 100px; background
Vue.js展示AJAX数据简单示例讲解

最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e
Android中js和原生交互的示例代码

本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf
使用D3.js创建物流地图的示例代码

本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图制作思路需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意
node.js遍历目录的方法示例

本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel
php+js实现点赞功能的示例详解

最近在做一个视频网站,需要实现视频的点赞功能,我是结合ajax和数据库实现的,数据库的格式为有四个字段:文章id,赞,踩,ip.因为需要一个ip只能点赞一次,所以需要一个ip字段存储点赞的ip,这样便于判断该ip是否已经点赞过了: 我将点赞和踩的图片做成两个按钮:具体代码如下: <button style="margin-left:4px" id="vote" rel="<?php echo 文章id;?>"> <i

js实现磁性吸附的示例

相关推荐

随机推荐