时间:2021-05-28
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;
}
}
编辑注:如果不能正常运行 注意字符的替换,因为好多网站为了安装都将字符转换成了中文下的标点符号。本站也尽量的替换。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
利用javascript移动div层-javascript拖动层:程序功能:利用javascript开发在界面上随意拖动以下htmlcode中的div层.jav
本文实例讲述了JavaScript实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下:这是一个完美的JS拖拽效果,带拖尾的JavaScript拖动层代码,
本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下:无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠
本文实例为大家分享了js实现div色块碰撞的具体代码,供大家参考,具体内容如下描述:生成两个div色块,一个可以拖动,一个不可以,用拖动的去撞击不能动的,会将这
本文实例为大家分享了js实现div色块拖动录制的具体代码,供大家参考,具体内容如下描述:实现一个div50*50的色块,拖动它生成一个轨迹,松手后,这个div会