javascript 可以拖动的DIV(二)


Posted in Javascript onJune 26, 2009

function beginDrag(elementToDrag,event)
{
var =event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
//这儿的deltaX/Y实际上就是得出鼠标和div的坐标差。
if(document.addEventListener)
//之所以在这儿加这样一个判断,是因为IE6和firefox对于javascript的事件处理有不同的方法(IE7之后的版本开始符合W3C的标准)。
//document.addEventlistener如果是true的话,那就是firefox等支持W3C DOM标准的浏览器,IE6中注册事件用attachEvent,而firefox等浏览器则是用addEventListener,语法如下所示。addEventListener函数的true参数表示可以捕捉事件。
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
//document.addEventListener("mouseout",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//document.attachEvent("onmouseout",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
//这儿的判断依然是考虑了不同的浏览器,stopPropagation是W3C DOM标准中使用的一个方法,用来取消事件的传播。我们使用了document.addEventListener这个方法,浏览器会从document对象沿着DOM节点向下传播到目标节点,注册的事件处理程序就会运行,然后事件会回传到父节点,如果父节点也有相应的事件处理程序,那么事件也会处理,为了避免这种情况,我们可以用stopPropagation来阻止事件的传播,这个方法的作用就是让其他元素对这个事件不可见。在IE6下,并没有元素捕捉事件的过程,不过有这个术语叫做起泡的过程,IE6中所用的方法就是cancelBubble,用来取消起泡,表示这个事件已被处理,其他元素不用再看见了。
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
//这儿的preventDefault用来通知浏览器不要执行与事件关联的默认动作,returnValue用来取消发生事件的源元素的默认动作,大家应该能看出这是在不同浏览器下发挥相同的作用。
//以下就是拖动div中所用的关键函数了。
function moveHandler(e)
{

if (!e) e=window.event; //如果是IE的事件对象,那么就用window.event

//全局属性,否则就用DOM二级标准的Event对象。
//在IE中,event是window的一个属性,也就是一个全局变量,但是在W3C DOM中,event是发生事件的文档对象的属性。在这个程序中,event是什么并不重要,关键是我们要取得鼠标的坐标值,在IE中,e这个参数传进来的时候,IE认不出来,所以我们就给e赋值为window.event。
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
//这儿就是改变现在正在作用的div的left和top属性。
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
//这个函数是用来移除侦听器,比较简单,就不详细说了。
if (!e) e=window.event;
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble=true;
}
}
三水点靠木 编辑注:如果不能正常运行 注意字符的替换,因为好多网站为了安装都将字符转换成了中文下的标点符号。本站也尽量的替换。

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
解读Vue组件注册方式
May 15 Vue.js
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 #Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 #Javascript
javascript 读取图片文件的大小
Jun 25 #Javascript
JQuery 入门实例1
Jun 25 #Javascript
JavaScript 开发中规范性的一点感想
Jun 23 #Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 #Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 #Javascript
You might like
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
javascript时区函数介绍
2012/09/14 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Python中bisect的使用方法
2019/12/31 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
高中生校园生活自我评价
2013/09/19 职场文书
自考自我鉴定范文
2013/10/30 职场文书
往来会计岗位职责
2013/12/19 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
九年级数学教学反思
2014/02/02 职场文书
绿色学校实施方案
2014/03/31 职场文书
激励口号大全
2014/06/17 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
高中家长意见怎么写
2015/06/03 职场文书
毕业实习单位意见
2015/06/04 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python