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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
Zerg兵种介绍
2020/03/14 星际争霸
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
比较完整的微信开发php代码
2016/08/02 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL