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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
javascript中的replace函数(带注释demo)
Jan 07 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
使用uni-app开发微信小程序的实现
Dec 13 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
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
长波知识介绍
2021/03/01 无线电
PHP 上传文件的方法(类)
2009/07/30 PHP
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
javascript 写类方式之三
2009/07/05 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
javascript实现checkbox全选的代码
2015/04/30 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
阿尔卡特(中国)的面试题目
2014/08/20 面试题
决心书范文
2014/03/11 职场文书
干部下基层实施方案
2014/03/14 职场文书
公司保密承诺书
2014/03/27 职场文书
九一八事变演讲稿
2014/09/05 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书