1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 可以拖动的div 实现代码【javascript】

可以拖动的div 实现代码【javascript】

时间:2021-07-03 05:36:45

相关推荐

可以拖动的div 实现代码【javascript】

web前端|js教程

拖动,div

web前端-js教程

可以拖动的p是一个比较难以做到的效果,特别是在浏览器对于js代码的运行效率还不是足够高的情况下,不过听说firefox对于js的支持正在增加,大概是料到了js在网页浏览的桌面化趋势中所占的重要地位吧。

jquery 3.0 源码,vm ubuntu 汉语,tomcat怎么查看项目名,限制爬虫抓取,php中的点什么意思,企业微信考勤机推广seolzw

要实现p的任意拖动,我们不妨分析一下整个过程。

当鼠标点击p时,触发一个事件,让p的位置属性(left,top)随着鼠标位置变化而变化,当鼠标释放后,p的位置属性就用了鼠标释放时的位置。

鼠标点击时触发事件是很容易做到的,只要在p的标签里加上onmouseclick就可以了,现在我们要解决的问题是如何让p的位置随着鼠标的位置变化而变化。

虽然这可能是一个很简单的推理过程,不过还是罗嗦点说清楚吧。p的left和top是p左上角的坐标,当我们把鼠标移到p中点击的时候,无疑鼠标的坐标和p的坐标是不一致的,这时候如果我们简单的让p的坐标等于鼠标的坐标,那么看起来的效果就不是那么完美了,所以我们先要得到鼠标的坐标和p坐标的差,然后在鼠标移动到的时候,在鼠标坐标上减去这个差来得到p的坐标(如果不太明白,那就先补习一下网页的基础知识)。

接下来的事情就简单了,当鼠标移动的时候,我们不断的计算得到p的坐标,并改变,在鼠标释放的时候,这个事件就被移除。

整个js函数如下:

function beginDrag(elementToDrag,event)

{

var deltaX=event.clientX-parseInt(elementToDrag.style.left);

var deltaY=event.clientY-parseInt(elementToDrag.style.top);

if(document.addEventListener)

{

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;

if(event.preventDefault) event.preventDefault();

else event.returnValue=false;

function moveHandler(e)

{

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

//全局属性,否则就用DOM二级标准的Event对象。

elementToDrag.style.left=(e.clientX-deltaX)+”px”;

elementToDrag.style.top=(e.clientY-deltaY)+”px”;

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;

}

cmseasy5.5源码,ubuntu右键单击复制,人工爬虫啥意思,南沙PHP培训,seo互点排名lzw

关于这个实现p拖动的js函数,实际上也是某位前辈公布于网上,这儿只是摘抄注解一下。

function beginDrag(elementToDrag,event)

{

var =event.clientX-parseInt(elementToDrag.style.left);

var deltaY=event.clientY-parseInt(elementToDrag.style.top);

//这儿的deltaX/Y实际上就是得出鼠标和p的坐标差。

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用来取消发生事件的源元素的默认动作,大家应该能看出这是在不同浏览器下发挥相同的作用。

//以下就是拖动p中所用的关键函数了。

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”;

//这儿就是改变现在正在作用的p的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;

}

}

安卓换装游戏 源码,vscode正则表达式空格,ubuntu 王者荣耀,关掉tomcat的内存检查,爬虫 防止403,php后台框架下载,seo网站优化上排名推广教程lzw

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。