javascript——拖拽（完整兼容代码）
拖拽，是JS经常会用到的效果，在网上有很多的这样那样的拖拽效果，但其中往往大多有各种各养的问题，功能不全，无法兼容，而且修改的时候 也是十分麻烦。
其实拖拽的原理很简单，无非是鼠标的三个动作的解析，以及对事件控制的理解。在此去繁化简，还原原汁原味的最易理解的拖拽原理。
实现鼠标需要三个事件，其实所以的拖拽都是围绕着 onmousedown(点击) onmousemove (移动) onmouseup( 松开)，然后是一个最简单事件捕获，IE中位setCapture()方法 -----IE自身独有的事件捕获
DOM中addEventListener 事件监听
如果你无法理解 ，请先用谷歌复习 啥叫事件捕获，然后接着是 需要一个往深入去想浏览器可视宽度以及可视高度，以防止拖拽跑出浏览器以外。接着是一个浏览器 自身窗口或框架被调整大小可能发生一个BUG 。只要把这些考虑进去 ，就可以实现一个无任何BUG的拖拽，但是使用过火狐的朋友都知道，火狐自带有拖拽，解决的办法是添加一个overflow:hidden;
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽</title>
<script type="text/javascript">
window.onload=function ()
{
var oDiv=document.getElementById("div1");
var startX=0; /* 鼠标起始位置 */
var startY=0;
var startLeft=0; /*oDiv起始位置*/
var startTop=0;
oDiv.onmousedown=startDrag; /* 仔细拼写 onmousedown，*/
function startDrag(e) /*鼠标点击事件 */
{
var e=e||window.event;
startX=e.clientX;
startY=e.clientY;
startLeft=oDiv.offsetLeft;
startTop=oDiv.offsetTop;
if (oDiv.setCapture)
/* setCapture()可以用在对DIV的拖动效果上。就不用给body设置onmousemove事件了，直接给DIV设置，然后通过setCapture()让它捕获所有的鼠标事件。*/
{
oDiv.onmousemove=doDrag; /*鼠标移动事件 */
oDiv.onmouseup=stopDarg; /*鼠标松开事件*/
oDiv.setCapture(); /*IE独享 事件捕获setCapture() */
}
else
{
document.addEventListener("mousemove",doDrag,true); /* DOM中事件捕获 */
document.addEventListener("mouseup",stopDarg,true);
}
}
function doDrag(e)
{
var e=e||window.event;
var l=e.clientX-startX+startLeft;
var t=e.clientY-startY+startTop;
if (l<0) /* 阻止超出浏览器可视宽度 */
{
l=0;
}
else if (l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if (t<0)/* 阻止超出浏览器可视高度 */
{
t=0
}
else if (t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+"px";
oDiv.style.top=t +"px";
}
function stopDarg()
{
if (oDiv.releaseCapture) /* 删除事件监听 */
{
oDiv.onmousemove=doDrag;
oDiv.onmouseup=stopDarg;
oDiv.releaseCapture();
}
else
{
document.removeEventListener("mousemove",doDrag,true);
document.removeEventListener("mouseup",stopDarg,true);
}
oDiv.onmousemove=null;
oDiv.onmouseup=null;
}
}
window.onresize=function() /* 浏览器，onresize 事件会在窗口或框架被调整大小时发生 */
{
var oDiv=document.getElementById('div1');
if (oDiv.offsetLeft>document.documentElement.clientWidth-oDiv.offsetWidth)
{
oDiv.style.left=document.documentElement.clientWidth-oDiv.offsetWidth+"px";
}
if (oDiv.offsetTop>document.documentElement.clientHeight-oDiv.offsetHeight)
{
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+"px";
}
}
</script>
</head>
<body style="background:#000;">
<div id="div1" style="background:red;width:100px;height:100px;position:absolute;left:0;top:0;overflow:hidden;cursor:move;"></div>
</body>
</html>
javascript——拖拽（完整兼容代码）的更多相关文章
- Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理
今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...
- Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理
我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...
- Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理
拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位 ...
- day52—JavaScript拖拽事件的应用（自定义滚动条）
转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...
- html --- canvas --- javascript --- 拖拽圆圈
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- android ListView和GridView拖拽移位实现代码
关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例: 首先 ...
- 每日分享！～ JavaScript(拖拽事件）
浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...
- javascript 拖拽事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- poj2074Line of Sight(直线相交）
链接 几何细节题. 对于每一个障碍物可以求出它在地产线上的覆盖区间,如下图. 紫色部分即为每个障碍物所覆盖掉的区间,求出所有的,扫描一遍即可. 几个需要注意的地方:直线可能与地产线没有交点,可视区间可 ...
- Android listview和ListAdapter搭配使用
ListView时Android中自带的数据显示控件,要使用ListView填充数据,必须要通过适配器来填充,这里给大家介绍一下ListAdapter适配器,效果图如下: java源码: packag ...
- 发现easyui-accordion一个bug，在ie6、ie7不兼容性问题
当设置全局css文件单元格样式为下面时 td{ word-break: break-all; word-wrap: break-word;} easyui-accordion在ie6.ie7上面会出现 ...
- 加速Eclipse使其成为超快的IDE
按照下述步骤来加速Eclipse为超快的IDE,它适用于32和64位版本的Eclipse /JDK(OS为64位Windows 7). 1.禁用防病毒软件,或将JDK.Eclipse.workspac ...
- CentOS查看CPU、内存、网络流量和磁盘 I/O【转载，待整理】
http://blog.csdn.net/zbyufei/article/details/6413273
- 年轻人你活着不是为了看K线！
年轻人你活着不是为了看K线! 在网上看到一篇文章,写得还不错,转给大家看一下,内容如下: 这篇文章本来是该几年前写的,奉劝大家不要去玩股票.因为那个时候我的<中国崛起的经济学分析>这本 ...
- VB6 GDI+ 入门教程[4] 文字绘制
http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[4] 文字绘制 2009 年 6 月 18 日 7条评论 ...
- QQ等级图标排名说明_QQ等级表,QQ最高等级(皇冠) qq到一星要5天
从2007年11月29日中午12:00开始,在不改变原有计算方式的情况下,加速QQ会员等级升级.QQ会员用户在原有通过每天在线2小时累积活跃天数来获取相应QQ等级增长的基础上,还可以根据QQ会员VIP ...
- Windows下快捷键
1.任务管理器ctrl+alt+delete 2.切换任务窗口alt+tab 3.命令行Win+R 命令: {打开任务管理器:taskmgr} {打开远程桌面连接:mstsc} 4.回到桌面Win+D ...
- java 三大框架 介绍
三大框架:Struts+Hibernate+Spring Java三大框架主要用来做WEN应用. Struts主要负责表示层的显示 Spring利用它的IOC和AOP来处理控制业务(负责对数据库的操作 ...