网上找的一个超简单的JS拖拽

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
/**
*取得元素的真实css属性
*@param {Object} d 元素
*@param {String} a 元素的css属性名
*@version 0.2
*/
function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
/**
* 取得鼠标坐标
* @return Position
*/
function getMouseLocation(e){
  if(!document.all){
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  else{
    mouseX = event.x + document.body.scrollLeft;
    mouseY = event.y + document.body.scrollTop;
  }
  return {x:mouseX,y:mouseY};
}
/**
* 拖动对象
* @param {DOM Object} DOM对象
*/
function drag(e,obj){
  var p1 = getMouseLocation(e);
  var startRight = null;
  var startTop = null;
  var startLeft = null;
  var startBottom = null;
  var l = gs(obj,"left");
  var r = gs(obj,"right");
  var t = gs(obj,"top");
  var b = gs(obj,"bottom");
  if(!l)
    startRight = parseInt(r);
  else
    startLeft = parseInt(l);
  if(!t)
    startBottom = parseInt(b);
  else
    startTop = parseInt(t);
  if(obj.setCapture)
    obj.setCapture();
  else if (window.captureEvents)
    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
  document.onmousemove = function(e){
    var p2 = getMouseLocation(e);
    var xMove = p2.x-p1.x;
    var yMove = p2.y-p1.y;
    if(!l)
      obj.style.right = (startRight - xMove)+"px";
    else
      obj.style.left = (startLeft + xMove)+"px";
    if(!t)
      obj.style.bottom = (startBottom - yMove)+"px";
    else
      obj.style.top = (startTop + yMove)+"px";
  }
  document.onmouseup = function(){
    if(obj.releaseCapture)
      obj.releaseCapture();
    else if (window.captureEvents)
      window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>
<style type="text/css">
div#test{border:solid 1px blue;background:red;position:absolute;left:100px;top:200px;width:200px;height:200px;cursor:pointer;}
</style>
</head>
<body>
<div id="test" onmousedown="drag(event,this)">拖我拖我拖我拖我拖我拖我拖我<div>
</body>
</html>