在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;
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
