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) // 给元素及时定位 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 } } })()
与简易拖拽的差异
简易拖拽的链接
可移动位置的改变
// 此处就是父元素的宽度减去子元素宽度 var width = box1.clientWidth - box.offsetWidth var height = box1.clientHeight - box.offsetHeight
下载源码链接
星辉的Github
以上就是js实现限定范围拖拽的示例的详细内容,更多关于js实现限定范围拖拽的资料请关注其它相关文章!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月22日
2024年05月22日
- dnf奶爸是哪个职业
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE]
- 谭维维.2007-耳界【天娱传媒】【WAV+CUE】
- KOKIA心は?かり(2012K2HD2016Mora)[24bit96kHzFLAC]
- 曝《AC影》最初主角不是黑人 前开发者分享背景设定
- 双子舞伶演员到中国旅游:头顶兔耳朵畅游迪士尼
- 《生化1RE》新爆料:节奏更慢丧尸更少 狂暴丧尸回归
- 任贤齐.2004-两极(第12张)【滚石】【WAV+CUE】
- 群星.1999-李泰祥与他的女弟子2CD【华特】【WAV+CUE】
- 李千娜.2023-关与你【环球】【FLAC分轨】
- 漫威终极逆转新手卡组用什么 新手最强阵容搭配攻略
- dnf如何设置一键拾取物品
- dnf安装卡在1%
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 群星-极度发烧流行经典《欧美名声烧》3辑24K金碟[WAV+CUE]