实现简单的js拖动库

在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] 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值