javascript实现完美拖拽效果_javascript技巧
程序员文章站
2022-03-30 08:07:29
...
拖拽的原理
1.获取距离(鼠标的位置-odiv的外边距)
2.理解什么时候用onmousemove事件
3.判断是否过界
html代码:
css代码:
#div1{width:100px;height:100px;background:red;position:absolute}
javascript代码:
window.onload=function(){ var oDiv=document.getElementById("div1"); var x=0; var y=0; oDiv.onmousedown=function(ev){ var oEvent=ev||event; //鼠标的横坐标减去div的offsetLeft x=oEvent.clientX-oDiv.offsetLeft; //鼠标的纵坐标减去div的offsetTop y=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var left=oEvent.clientX-x; var right=oEvent.clientY-y; //判断左边是否过界 if(leftdocument.documentElement.clientWidth-oDiv.offsetWidth){ left=document.documentElement.clientWidth-oDiv.offsetWidth; } //判断上边是否过界 if(rightdocument.documentElenment.clientHeight){ right=document.documentElenment.clientHeight-oDiv.offsetHeight; } oDiv.style.left=left+"px"; oDiv.style.top=right+"px"; } document.onmouseup=function(){ //清空document的事件 document.onmousemove=null; document.onmouseup=null; } //解决低版本火狐bug,干掉系统默认 return false; } }
以上所述就是本文的全部内容了,希望大家能够喜欢。
推荐阅读
-
JS仿淘宝实现的简单滑动门效果代码_javascript技巧
-
一个鼠标移动滑出层效果的实现代码_javascript技巧
-
JS根据年月获得当月天数的实现代码_javascript技巧
-
js实现select组件的选择输入过滤代码_javascript技巧
-
js输入框邮箱自动提示功能代码实现_javascript技巧
-
用JavaScript实现类似于ListBox功能示例代码_javascript技巧
-
在光标处插入字符串的实现代码 兼容IE,Firefox_javascript技巧
-
Javascript实现滚动图片新闻的实例代码_javascript技巧
-
由JavaScript技术实现的web小游戏(不含网游)_javascript技巧
-
Javascript 实现广告后加载 可加载百度谷歌联盟广告[原创]_javascript技巧