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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
JavaScript中操作字符串小结
May 04 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
js实现特别简单的钟表效果
Sep 14 Javascript
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
php jquery 多文件上传简单实例
2013/12/23 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
10个php函数实用却不常见
2015/10/13 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python中实现php的var_dump函数功能
2015/01/21 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
软件售后服务承诺书
2014/05/21 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
高中优秀作文(范文)
2019/08/15 职场文书