javascript 拖拽功能_html-js-css

概述拖拽功能是我们经常用到的一个功能，流程如下：鼠标点击选框时，计算出鼠标位置和选框位置的距离差，也就是disX和disY；鼠标移动，获取鼠标位置坐标，然后减去步骤一种的距离差，就是选框的坐标；鼠标d起时，清除鼠标移动函数需要注意以下几点：鼠标移动时，有可能移出选框的范围，所以需要使用全局的移动函数，也

拖拽功能是我们常常用到的1个功能，流程以下：

@H_301_4@鼠标点击选框时，计算出鼠标位置和选框位置的距离差，也就是disX和disY；鼠标移动，获得鼠标位置坐标，然后减去步骤1种的距离差，就是选框的坐标；鼠标d起时，清除鼠标移动函数需要注意以下几点：

@H_301_4@鼠标移动时，有可能移出选框的范围，所以需要使用全局的移动函数，也就是document.onmousemove；鼠标d起时，可能不在选框范围内d起，程序会出现BUG，所以使用全局d起，也就是 document.onmouseup；要控制选框的移动范围，使其不能移出阅读器边框，通过对上下左右位置的计算，控制选框的坐标始终在阅读器中。超过坐标临界值，使变量赋值为临界值，就能够实现控制选框移动范围的功能。代码以下：

<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/HTML4/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf⑻" /> <Title>New Web Project</Title> <style> #div1{ wIDth:200px; height:200px; position:absolute; background:red; } </style> <script> window.onload=function(){ var odiv=document.getElementByID('div1'); odiv.onmousedown=function(evt){ var e=evt||event; var disX=e.clIEntX-odiv.offsetleft; var disY=e.clIEntY-odiv.offsettop; document.onmousemove=function(evt1){ var eMove=evt1||event; /** * 控制选框不被拖出阅读器范围 */ var xPos=eMove.clIEntX-disX; var yPos=eMove.clIEntY-disY; if(xPos<0) { xPos=0; } else if(xPos>document.documentElement.clIEntWIDth-odiv.offsetWIDth) { xPos=document.documentElement.clIEntWIDth-odiv.offsetWIDth; } if(yPos<0) { yPos=0; } else if(yPos>document.documentElement.clIEntHeight-odiv.offsetHeight) { yPos=document.documentElement.clIEntHeight-odiv.offsetHeight; } odiv.style.left=xPos+'px'; odiv.style.top=yPos+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; return false;//禁止firefox默许的行动，firefox的1个BUG }; }; </script> </head> <body> <div ID='div1'></div> </body></HTML>
运行结果图：

总结

以上是内存溢出为你收集整理的javascript 拖拽功能全部内容，希望文章能够帮你解决javascript 拖拽功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1019815.html