实现简单的js拖动库

最新推荐文章于 2024-04-12 09:48:16 发布

yangbo99

最新推荐文章于 2024-04-12 09:48:16 发布

阅读量1.1k

点赞数

文章标签： object function null javascript ajax 浏览器

本文链接：https://blog.csdn.net/yangbo99/article/details/1902782

版权

在ajax应用程序中，拖动技术是经常要用到的，在桌面程序中，这是很常用也很容易实现的，但是在ajax中用javascript就不是这么容易实现的了。现在我们制作一个js拖动库来实现，先讲下简单思路。
今天先介绍实现拖动的基本方法，在以后的文章中，我们来完善这个库。这个库主要由3步建立。

当鼠标键按下时，记录要移动的对象和对象的坐标。
当鼠标移动时，改变对象的left,top属性来实现对象的移动。
当鼠标键被释放时，释放对象。
为了方便理解核心代码，我先把html,css和包含全局变量的js代码写出来。
.se4Drag{ position:absolute; background-color:#00FFFF; }
<body> <div class="se4Drag"> 拖动版块<br /> www.se4.cn </div> </body>
var se4_move_object=null var se4_object_X=0; var se4_object_Y=0; var se4_mouse_X=0; var se4_mouse_Y=0;
现在可以看核心代码了，首先是当鼠标键按下时，记录要移动的对象和对象的坐标。
function se4OnMouseDown(){ se4_move_object=window.event.srcElement; if (se4_move_object.className=="se4Drag"){ //设置样式，可自己定义 se4_move_object.style.cursor="move"; //记录对象当前坐标 se4_object_X=se4_move_object.style.pixelLeft; se4_object_Y=se4_move_object.style.pixelTop; }else{ se4_move_object=null; } }

第二步：当鼠标移动时，改变对象的left,top属性来实现对象的移动。
function se4OnMouseMove(){ if (se4_move_object==null) return false; se4_mouse_X=window.event.x; se4_mouse_Y=window.event.y; se4_move_object.style.left=se4_mouse_X+"px"; se4_move_object.style.top=se4_mouse_Y+"px"; }
第三步：当鼠标键被释放时，释放对象。
function se4OnMouseUp(){ if (se4_move_object==null) return false; //把设置的样式改回来 se4_move_object.style.cursor=""; //释放对象 se4_move_object=null; }
第四步：把刚才的函数绑定到document上。
document.οnmοusedοwn=se4OnMouseDown; document.οnmοusemοve=se4OnMouseMove; document.οnmοuseup=se4OnMouseUp;
到这里基本就可以实现拖动了，如果你看明白了，恭喜你，但是不要太高兴，这只是开始，还有好多比如浏览器兼容等的问题没有解决，我在以后的文章中会完善这个js拖动库的。如果你没有看明白可以联系我(se4.cn站长)。
原文:[url=http://www.se4.cn/article/200711/24001.asp]http://www.se4.cn/article/200711/24001.asp[/url]