用Javascript实现鼠标拖拽网页表单

核心提示： 点击这里查看代码运行效果移动一个元素我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，用Javascript实现鼠标拖拽网页表单(3)，css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来

点击这里查看代码运行效果

移动一个元素

我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位，可以用相对位置来定位了．我们将鼠标的移动全部相对页面top-left，基于这点，我们可以进行下一步了．

当我们定义item.style.position='absolute'，所有的操作都是改变left坐标与top坐标，然后它移动了。

document.onmousemove = mouseMove;
document.onmouseup　 = mouseUp;
var dragObject　= null;
var mouseOffset = null;
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos　　= getPosition(target);
var mousePos　= mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top　= 0;
while (e.offsetParent){
　left += e.offsetLeft;
　top　+= e.offsetTop;
　e　　 = e.offsetParent;
}
left += e.offsetLeft;
top　+= e.offsetTop;
return {x:left, y:top};
}
function mouseMove(ev){
ev　　　　　 = ev || window.event;
var mousePos = mouseCoords(ev);
if(dragObject){
　dragObject.style.position = 'absolute';
　dragObject.style.top　　　= mousePos.y - mouseOffset.y;
　dragObject.style.left　　 = mousePos.x - mouseOffset.x;
　return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
　dragObject　= this;
　mouseOffset = getMouseOffset(this, ev);
　return false;
}
}

点击这里查看代码运行效果