js的一个托拽功能，网上找的，记录一下

直接写成js文件了，示例也写里面

//  JavaScript Document

function  $(_sId) ... {return document.getElementById(_sId);}
function  moveStart (event, _sId) ... {
  var oObj = $(_sId);
  oObj.onmousemove = mousemove;
  oObj.onmouseup = mouseup;
  oObj.setCapture ? oObj.setCapture() : function()...{};
  oEvent = window.event ? window.event : event;
  var dragData = ...{x : oEvent.clientX, y : oEvent.clientY};
  var backData = ...{x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};
  function mousemove()...{
   var oEvent = window.event ? window.event : event;
   var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
   var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);
   oObj.style.left = iLeft;
   oObj.style.top = iTop;
   backData.y=iLeft; //本可以不加
   backData.x=iTop; //本可以不加
   //document.getElementById("x").innerHTML=oObj.style.left+"|"+iLeft+"|"+ backData.y;
   //document.getElementById("y").innerHTML=oObj.style.top+"|"+iTop+"|"+ backData.x;
   dragData = ...{x: oEvent.clientX, y: oEvent.clientY};   
  }
  function mouseup()...{
   var oEvent = window.event ? window.event : event;
   oObj.onmousemove = null;
   oObj.onmouseup = null;
   if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight)...{
    oObj.style.left = backData.y; 
    oObj.style.top = backData.x;
    //document.getElementById("x").innerHTML=oObj.style.left+"|"+backData.y;
    //document.getElementById("y").innerHTML=oObj.style.top+"|"+backData.x;
   }
   oObj.releaseCapture ? oObj.releaseCapture() : function()...{};
  }
 }
 
/**/ /*
  *示例：
  *<div id="msg" style="position:absolute;top:20px;left:100px;" >
  *  <table width="200" border="0" cellspacing="0" cellpadding="0" >
  *      <tr>
  *        <td colspan="2"  onmousedown="javascript:moveStart(event,'msg');" onmouseover="this.style.cursor='move';" >系统消息</td>
  *      </tr>
  *      <tr>
  *        <td width="87">123456</td>
  *        <td width="113">1231656</td>
  *     </tr>
  *  </table>
  *</div>
  */

还有一种，没试过，直接copy过来先，看上去也蛮好用的，这种是用样式控制的，使用起来比前面那种相对简单，但功能就不知道了

< style >
<!--
.drag ... {position:relative;cursor:hand}
-->
</ style >
< script language = " JavaScript1.2 " >
<!--
var dragapproved = false
var z,x,y
function move() ... {
if (event.button==1&&dragapproved)...{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags() ... {
if (!document.all)
return
if (event.srcElement.className=="drag")...{
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown = drags
document.onmouseup = new  Function( " dragapproved=false " )
// -->
</ script >
< p >< img src = " http://www.soojs.com/images/137_46_logo.gif "   class = " drag " ></ p >
         < p >< font face = " Arial Black "   class = " drag " > 拖我 </ font ></ p >
         < p > 在需要拖动的元素 + class = drag即可 </ p >