一段不错的拖拽代码

在网上发现一段不错的拖拽代码,自己改了一小小部分,其实只是该了html部分,哈哈惭愧

感觉不错,共享 一下

 

<! doctype html public  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< html >
< head >
< title >  wangzj_test  </ title >
< meta name = " Generator "  content = " EditPlus " >
< meta name = " Author "  content = "" >
< meta name = " Keywords "  content = "" >
< meta name = " Description "  content = "" >
</ head >

< body >
< script >
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;
 }
}
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
 };
}


</ script >
< table id = " wangzj " >< tr nowrap >< td >
< div   > 蜡笔小新 </ div >
</ td ></ tr ></ table >
< script >
window.onload = makeDraggable(document.all( " wangzj " ))
</ script >
</ body >
</ html >

 

原创:http://www.blueidea.com/tech/web/2006/3791.asp