DDR爱好者之家 Design By 杰米
磁性吸附
目录
- 代码实例
- 与限定范围拖拽的差异
- 下载源码链接
代码实例
* { 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实现磁性吸附的资料请关注其它相关文章!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年05月18日
2024年05月18日
- 【ABC唱片】《春花秋月SACD-062》-WAV分轨
- [ABC唱片]-《俄罗斯三角琴》[K2-064][K2CD]WAV+CUE
- 群星《2007香港高级视听展原音精选SACD》[ISO][2.9G]
- 群星《华纳至尊金曲》2CD[FLAC][865M]
- 周杰伦《叶惠美》[WAV分轨][3.6G]
- 滚石群星.2000-超级BANDBANDBAND【滚石】【WAV+CUE】
- 群星.2016-民谣地图·拾众而歌【众乐纪】【FLAC分轨】
- 群星.1994-大烂片VOL.1--2【派森】【WAV+CUE】
- 群星《中国绝佳经典》4CD[WAV分轨][2.5G]
- 叶倩文《华纳最出色系列》3CD[WAV+CUE][1.8G]
- 草蜢 《忘情森巴舞(国语)》[WAV+CUE][472M]
- 张国荣.1995-宠爱(2014年K2HD限量版)【滚石】【WAV+CUE】
- 胡立伟-胡立伟影视音乐系列【FLAC】
- 群星.1986-新格名曲精丫新格】【WAV+CUE】
- 群星.1986-新格名曲精选-歌3【新格】【WAV+CUE】