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 ...
随机推荐
- SAP研究贴之--发票校验提示移动平均价为负
近日,应付岗密集出现发票校验时移动平均价为负值导致过账失败的情况,采购经理又是拍桌子.又是摔杯子的.财务经理安排任务彻底清查,找出问题原因.哎,毫无头绪啊...测试机模拟业务吧流程:合同(系统外)-采 ...
- [转载] Linux下查看内存使用情况方法总结
原文: http://9iphp.com/linux/1247.html 强烈推荐 htop.
- 图片的copy，从一个目录复制到另一个目录
代码: public function index(){ $path='G:/相片/2014.9.8深圳莲花山/IMG_1282.JPG'; $path=iconv('utf-8','gb2312', ...
- Jdbc入门
JDBC入门 l 导jar包:驱动! l 加载驱动类:Class.forName(“类名”); l 给出url.username.password,其中url背下来! l 使用DriverMa ...
- Jump Game II
Description: Given an array of non-negative integers, you are initially positioned at the first inde ...
- iframe页面调用父窗口JS函数
A页面iframe 页面B, 此时 如果要在B页面调用父页面A的函数 B页面写法 parent.functionName(); 错误1: 解决办法 var js_domain_async = 'bai ...
- 【spring-quartz】 定时调度，时间设置
. CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年] 序号 说明 是否必填 允许填写的值 允许的通配符 1 ...
- Yum常用命令及Yum中文手册
转自:http://blog.csdn.net/huangbiao86/article/details/6646471 Yum配置文件位于/etc/yum.conf和/etc/yum.repos.d/ ...
- json方法
http://penghuaiyi.iteye.com/blog/1922632 package com.yd.web.util; import java.lang.reflect.Type; imp ...
- Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio »迁移
Migrations¶ 4 of 4 people found this helpful The Contoso University sample web application demonstra ...