本文主要和大家分享js实现拖拽和吸附代码，希望能帮助到大家。
nbsp;html>Document * {padding: 0;margin: 0;}#big {width: 500px;height: 500px;background-color: #ccc;position: relative}#box {width: 100px;height: 100px;background-color: #f00;position: absolute}window.onload = function () {var box = document.getElementById('box');var big = document.getElementById('big');// 鼠标在box中的位置var disX = 0,disY = 0;box.onmousedown = function (e) {var thisE = e || event;disX = thisE.clientX - box.offsetLeft;disY = thisE.clientY - box.offsetTop;document.onmousemove = function (ev) {var thisEvent = ev || event;var l = thisEvent.clientX - disX;var t = thisEvent.clientY - disY;if (l big.offsetWidth - box.offsetWidth - 20) {l = big.offsetWidth - box.offsetWidth;}if (t big.offsetHeight - box.offsetHeight - 20) {t = big.offsetHeight - box.offsetHeight;}box.style.left = l + 'px';box.style.top = t + 'px';document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;}}e.preventDefault();}}
登录后复制
相关推荐：
js代码实现鼠标拖拽div实例
js控制文件拖拽及获取拖拽内容
限制范围拖拽，磁性吸附。
以上就是js实现拖拽和吸附代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2785354.html
