js实现简单的拖拽效果
本文实例为大家分享了js实现简单的拖拽效果的具体代码,供大家参考,具体内容如下
1.拖拽的基本效果
思路:
鼠标在盒子上按下时,准备移动 (事件加给物体)
鼠标移动时,盒子跟随鼠标移动 (事件添加给页面)
鼠标抬起时,盒子停止移动 (事件加给页面)
var o = document.querySelector('div'); //鼠标按下 o.onmousedown = function (e) { //鼠标相对于盒子的位置 var offsetX = e.clientX - o.offsetLeft; var offsetY = e.clientY - o.offsetTop; //鼠标移动 document.onmousemove = function (e) { o.style.left = e.clientX - offsetX + "px"; o.style.top = e.clientY - offsetY + "px"; } //鼠标抬起 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; } }
2.拖拽的问题
若盒子中出现了文字,或盒子自身为图片,由于浏览器的默认行为(文字和图片本身就可以拖拽),我们可以设置return false来阻止它的默认行为,但这种拦截默认行为在IE低版本中,不适用,可以使用全局捕获来解决IE的问题。
全局捕获
全局捕获仅适用于IE低版本浏览器。
<button>btn1</button> <button>btn2</button> <script> var bts = document.querySelectorAll('button') bts[0].onclick = function () { console.log(1); } bts[1].onclick = function () { console.log(2); } // bts[0].setCapture() //添加全局捕获 // bts[0].releaseCapture() ;//释放全局捕获 </script>
一旦为指定节点添加全局捕获,则页面中其它元素就不会触发同类型事件。
3.完整版的拖拽
var o = document.querySelector('div'); //鼠标按下 o.onmousedown = function (e) { if (o.setCapture) { //IE低版本 o.setCapture() } e = e || window.event //鼠标相对于盒子的位置 var offsetX = e.clientX - o.offsetLeft; var offsetY = e.clientY - o.offsetTop; //鼠标移动 document.onmousemove = function (e) { e = e || window.event o.style.left = e.clientX - offsetX + "px"; o.style.top = e.clientY - offsetY + "px"; } //鼠标抬起 document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; if (o.releaseCapture) { o.releaseCapture();//释放全局捕获 } } return false;//标准浏览器的默认行为 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
uniapp中uni.request(OBJECT)接口请求封装实例代码
在开发的时候经常会用到前端请求后端接口,每次的请求都会出现地址不一样,参数不一样,方式不一样等等情况,下面这篇文章主要给大家介绍了关于uniapp中uni.request(OBJECT)接口请求封装的相关资料,需要的朋友可以参考下2022-12-12使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值。下面以修改数据库的status状态值来实现批量展示功能2016-11-11使用JS判断是否数字和小数点组合的数字的两中方法比较(isNaN和逐判断)
使用js判断数字和小数点的方法非常之多。但是就目前而言,我见过最好用的判断方法应该来说是isNaN,它比较方便,而逐个比较的方法有一定的弊端。2009-09-09
最新评论