推荐:怎么用javascript进行拖拽（3）

移动一个元素

我们知道了怎么捕捉鼠标移动与点击．剩下的就是移动元素了．首先，要确定一个明确的页面位置，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;
 }
}

运行代码框

<script>Number.prototype.NaN0=function(){return isNaN(this)?0:this;}var iMouseDown  = false;var dragObject  = null;var curTarget   = null;function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){  dragObject  = this;  mouseOffset = getMouseOffset(this, ev);  return false; }}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 + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);  top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);  e     = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top};}function mouseCoords(ev){ if(ev.pageX || ev.pageY){  return {x:ev.pageX, y:ev.pageY}; } return {  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  y:ev.clientY + document.body.scrollTop  - document.body.clientTop };}function mouseDown(ev){ ev         = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){  return false; }}function mouseUp(ev){ dragObject = null; iMouseDown = false;}function mouseMove(ev){ ev         = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target   = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){  dragObject.style.position = 'absolute';  dragObject.style.top      = mousePos.y - mouseOffset.y;  dragObject.style.left     = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false;}document.onmousemove = mouseMove;document.onmousedown = mouseDown;document.onmouseup   = mouseUp;window.onload = function() { makeDraggable(document.getElementById('DragImage5')); makeDraggable(document.getElementById('DragImage6')); makeDraggable(document.getElementById('DragImage7')); makeDraggable(document.getElementById('DragImage8'));}</script><FIELDSET id=Demo5 style="HEIGHT: 70px"><h3>Demo - Drag any of the images</h3><IMG id=DragImage5 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951964.gif"><IMG id=DragImage6 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951595.gif"><IMG id=DragImage7 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951331.gif"><IMG id=DragImage8 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203952145.gif"> </FIELDSET>

你会注意到这个代码几乎是前面的全集，将前面的合在一起就实现了拖拽效果了．

当我们点击一个item时，我们就获取了很多变量，如鼠标位置，鼠标位置自然就包含了那个item的坐标信息了．如果我们点击了一个20*20px图像的正中间，那么鼠标的相对坐标为{x:10,y:10}．当我们点击这个图像的左上角那么鼠标的相对坐标为{x:0,y:0}.当我们点击时，我们用这个方法取得一些鼠标与图片校对的信息．如果我们不能加载页面item，那么信息将是document信息，会忽略了点击的item信息．

mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回item相对页面左上角的坐标，如果我们尝试获取item.offsetLeft或者item.style.left，那么我们将取得item相对与父级的位置，不是整个document．所有的脚本我们都是相对整个document，这样会更好一些．

为了完成getPosition任务，必须循环取得item的父级，我们将加载内容到item的左／上的位置．我们需要管理想要的top与left列表．

自从定义了mousemove这个函数，mouseMove就会一直运行．第一我们确定item的style.position为absolute，第二我们移动item到前面定义好的位置．当mouse点击被释放，dragObject被设置为null，mouseMove将不在做任何事．