拖拽，是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——拖拽（完整兼容代码）的更多相关文章

  1. Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

    今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript&q ...

  2. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  3. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  4. Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理

    拖拽的原理: 其实就是鼠标与左上角的距离保持不变.我们来看下图, 这红点就是鼠标. 拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置,就是这么简单,就是这么任性. 那这个距离怎么求呢?? 鼠标的位 ...

  5. day52—JavaScript拖拽事件的应用（自定义滚动条）

    转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...

  6. html --- canvas --- javascript --- 拖拽圆圈

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  7. android ListView和GridView拖拽移位实现代码

    关于ListView拖拽移动位置,想必大家并不陌生,比较不错的软件都用到如此功能了.如:搜狐,网易,百度等,但是相比来说还是百度的用户体验较好,不偏心了,下面看几个示例:             首先 ...

  8. 每日分享！～ JavaScript(拖拽事件）

    浏览器的拖拉事件 拖拉(drag)指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括元素节点.图片.链接.选中的文字等等.在网页中 ...

  9. javascript 拖拽事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [转载] 构建微服务：使用API Gateway

    原文: http://mp.weixin.qq.com/s?__biz=MzA5OTAyNzQ2OA==&mid=206889381&idx=1&sn=478ccb35294c ...

  2. Oracle正则表达式函数：regexp_like、regexp_substr、regexp_instr、regexp_replace

    Oracle正则表达式函数:regexp_like.regexp_substr.regexp_instr.regexp_replace   --去掉所有特殊字符,只剩字母  SELECT REGEXP ...

  3. TCP/IP，Http，Socket，XMPP的区别

    大学学习网络基础的时候老师讲过,网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层.通过初步的了解,我知道IP协议对应于网络层,TCP协议对应于传输层,而HTTP协议对应于应用 ...

  4. asmca无法创建ASM磁盘

    现象 grid用户使用asmca无法创建asm磁盘,如下图 分析 如图所示,报错说是 Grid Infrastructure 出了问题.那么 Grid Infrastructure 是什么 ? 在安装 ...

  5. 牛客网 --java问答题

    http://www.nowcoder.com/ 主要是自己什么都不怎么会.在这里可以学习很多的! 第一天看题自己回答,第二天看牛客网的答案! 1 什么是Java虚拟机?为什么Java被称作是“平台无 ...

  6. PHP5中PDO的简单使用

    PHP5中PDO的简单使用 标签: php数据库mysql扩展extensionexception 2012-05-06 10:27 27753人阅读 评论(0) 收藏 举报  分类: PHP(6)  ...

  7. [转]Android WebView播放视频（包括全屏播放），androidwebview

    Android WebView播放视频(包括全屏播放),androidwebview 最近项目开发中用到了WebView播放视频的功能,总结了开发中犯过的错误,这些错误在开发是及容易遇到的,所以我这里 ...

  8. GoF--原型设计模式

    用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.

  9. 【CITE】C# 如何 实现一个窗体和另一个窗体始终保持相对的位置

    C# 如何 实现一个窗体和另一个窗体始终保持相对的位置,任由一个窗体移动,当点击按钮时,弹出的另一个窗体也与之保持相对位置(如左上角)你根据第一个窗体的location去算第二个窗体的location ...

  10. ArcGIS 10.3 安装及破解

    系统环境:win7 64位操作系统. 一.ArcGIS 10.3包简介 ArcGIS 10.3 下载包含 1．  ArcGIS for Desktop ArcGIS for Desktop简介: Ar ...