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 ...
随机推荐
- JS trim()方法使用
JS trim()方法使用上有浏览器限制: 1.直接使用 string.trim() 浏览器版本限制:JavaScript Version 1.8 2.间接使用<即自己使用正则构造类trim的 ...
- js输出26个字母两种方法(js fromCharCode的使用)
方法一 var character = new Array("A","B","C","D","E", ...
- Python学习笔记15—mysql的操作
安装 Python-MySQLdb pip install mysql-Python Python对mysql的操作 建立一个实验数据库demo mysql> create database d ...
- jQuery的选择器小总结
这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 $('.in ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
- D3.js 让图表动起来
D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 一.什么是动态效果 绘制完成后不再发生变化的,这是静态的图表. 动态的图表,是指图表 ...
- Android_用户界面概述和数据单位
一.UI界面概述 UI,对于一个应用而言用户界面是非常重要的一部分,是应用的脸,用户对应用第一个印象来自于界面,因此如果没有完美的用户界面,很难留住用户. 好的用户界面会极大提高用户的使用欲望并维护客 ...
- J2EE 第二阶段项目之JUnit4进行单元测试（五）
今天学习了JUnit4进行单元测试.这样就可以不写页面直接进行过功能模块测试.也不是很深入的了解. JUnit4和自己写的代码可以分割开来. 首先呢准备两个jar包: 可以对mapper进行测试,当然 ...
- [Selenium]点击Calendar控件后，Calendar dialog很快消失
有的日历控件使用了“opacity:0”透明度加上“display:none”来控制其是否显示,使用moveToElement方法不能移动到dialog上,可以把这两个属性的值进行修改,使其可见,使用 ...
- request获取ip数据
http://www.cnblogs.com/icerainsoft/p/3584532.html