拖拽，是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. QQMain

    import java.awt.*; import javax.swing.*; import java.awt.event.*; public class QQMain extends JFrame ...

  2. Sqlserver_时间用法

    函数 描述 GETDATE() 返回当前的日期和时间 DATEPART() 返回日期/时间的单独部分 DATEADD() 在日期中添加或减去指定的时间间隔 DATEDIFF() 返回两个日期之间的时间 ...

  3. OpneCV 二值图像区域处理

    //--------------------------------------[程序说明]------------------------------------------- // 在图像处理中总 ...

  4. shell如何在指定文件的指定位置后面添加内容

    最近工作中遇到一个问题,想在某个文件的指定位置后面添加一个标志位,要求在shell脚本里实现. 问题说明: 想在sys_config.fex文本的某个字符串后面添加一个flag 例如:sys_conf ...

  5. DedeCMSV57数据库结构文档

        表名:dede_addonarticle(ENGINE=MyISAM/CHARSET=gbk) 说明:Top 字段名 说明描述 具体参数 aid 文章ID mediumint(8) unsig ...

  6. Cmd Markdown 简明语法手册

    『Cmd 技术渲染的沙箱页面,点击此处编写自己的文档』 Cmd Markdown 简明语法手册 标签: Cmd-Markdown 1. 斜体和粗体 使用 * 和 ** 表示斜体和粗体. 示例: 这是 ...

  7. IE和主流浏览器

    1.添加事件 addEventListener 主流 attachEvent     IE 2.移除事件 removeEventListener detachEvent 3.获取事件对象 event ...

  8. jqury.jqzoom插件--放大镜

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

  9. jmeter 使用URL重写处理用户会话

    如果您的web应用程序使用URL重写而不是cookie保存会话信息, 那么你需要做一些额外的工作来测试你的网站. 正确应对URL重写,JMeter需要解析HTML 接收从服务器和检索独特的会话ID,使 ...

  10. [mondrian] 快速入门

    一.下载地址 mondrian各个版本和工具等的下载地址: http://sourceforge.net/projects/mondrian/files/?source=navbar 注意:mondr ...