javascript 拖拽功能
来源:互联网 发布:mysql 最近一天 编辑:程序博客网 时间:2024/05/10 10:57
拖拽功能是我们经常用到的一个功能,流程如下:
- 鼠标点击选框时,计算出鼠标位置和选框位置的距离差,也就是disX和disY;
- 鼠标移动,获取鼠标位置坐标,然后减去步骤一种的距离差,就是选框的坐标;
- 鼠标弹起时,清除鼠标移动函数
- 鼠标移动时,有可能移出选框的范围,所以需要使用全局的移动函数,也就是document.onmousemove;
- 鼠标弹起时,可能不在选框范围内弹起,程序会出现bug,所以使用全局弹起,也就是 document.onmouseup;
- 要控制选框的移动范围,使其不能移出浏览器边框,通过对上下左右位置的计算,控制选框的坐标始终在浏览器中。超过坐标临界值,使变量赋值为临界值,就可以实现控制选框移动范围的功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>New Web Project</title><style>#div1{width:200px;height:200px;position:absolute;background:red;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');oDiv.onmousedown=function(evt){var e=evt||event;var disX=e.clientX-oDiv.offsetLeft;var disY=e.clientY-oDiv.offsetTop;document.onmousemove=function(evt1){var eMove=evt1||event;/** * 控制选框不被拖出浏览器范围 */var xPos=eMove.clientX-disX;var yPos=eMove.clientY-disY;if(xPos<0){xPos=0;}else if(xPos>document.documentElement.clientWidth-oDiv.offsetWidth){xPos=document.documentElement.clientWidth-oDiv.offsetWidth;}if(yPos<0){yPos=0;}else if(yPos>document.documentElement.clientHeight-oDiv.offsetHeight){yPos=document.documentElement.clientHeight-oDiv.offsetHeight;}oDiv.style.left=xPos+'px';oDiv.style.top=yPos+'px';};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};return false;//阻止firefox默认的行为,firefox的一个bug};};</script></head><body><div id='div1'></div></body></html>
运行结果图:
0 0
- javascript 拖拽功能
- JavaScript之拖拽功能、封装
- 详解原生JavaScript实现div拖拽功能
- javascript 鼠标拖拽盒子--基础功能版
- 使用原生JavaScript实现弹出层登录拖拽功能
- javascript功能
- 使用JavaScript动态创建正弦图像,还有div拖拽功能,欢迎评价~!
- 帮助你实现移动设备上的拖拽刷新功能的javascript类库 - hook.js
- 用javascript实现对div的拖拽功能的实现过程
- 用javascript实现对div的拖拽功能的实现过程
- 简单几步原生javascript实现元素拖拽功能兼容所有浏览器
- JavaScript实现[网易云音乐Web站登录窗口]拖拽功能
- ie功能汇总(javascript)
- 一些javascript實用小功能
- javascript常用功能
- IE功能汇总(javascript)
- Javascript的FSO功能
- Javascript常用功能函数
- int main(int argc,char* argv[])详解
- 第15周项目2(1)-阅读程序
- Cocos2d-js 学习(二): cc.Sprite 简单API记录
- JS小例子
- Java的位运算符详解实例——与(&)、非(~)、或(|)、异或(^)
- javascript 拖拽功能
- three.js 源码注释(三十七)Texture/CompressedTexture.js
- 博客迁移Github
- 第十五周项目 3 在OJ上玩指针(2—基本操作)
- 使用ifstream和getline读取文件内容[c++]
- Java Executors(线程池)
- 慈母手中线,游子身上衣
- 第15周项目-在OJ上玩指针(指针的基本操作)
- 第十五周 刷OJ题-C/C++经典程序训练3之模拟计算器