js 窗口拖拽

 <div id="div1" style="left:10px;top:10px; position : absolute; 

 

 background-color : #c3d9ff; 

 

 margin : 0px; 

 

 padding : 5px; 

 

 border : 0px; 

 

 width : 100px; 

 

 height:100px; ">div1:可以拖动的div1</div> 

 

<div id="div2" style="

 

 left:120px;top:10px;background-color : #f3d9ff;

 

  position : absolute; 

 

 background-color : #c3d9ff; 

 

 margin : 0px; 

 

 padding : 5px; 

 

 border : 0px; 

 

 width : 100px; 

 

 height:100px; 

 

 ">

 

 <div id="tdiv2" οnmοusedοwn="simpleDrag(div2,1,1,tdiv2)">div2:随屏幕一起滚</div>

 

 </div> 

 

 

 

 

<script type="text/javascript">

 

simpleDrag(div1)

 

simpleDrag(div2,1,1,tdiv2)

 

 

 /**

 

 * DIV滚动方法(obj,scrollAble)

 

 * sukun

 

 * 1,div对象id

 

 * 2,是否随屏滚动(0,1)[false,true]

 

 * 3,是否可以出界(0,1)[false,true]

 

 */

 

 function simpleDrag(obj,scrollAble,outlineAble,tobj){

 

 

 var oZIndex=0;

 

 var oldX,oldY; //老的 clientX,clientY

 

 var oldLeft,oldTop;  //老的pixelLeft,pixelTop

 

 var scrollX,scrollY; //老的 左边距

 

 alert(tobj)

 

 tobj.οnmοusedοwn=function(){  //准备移动

 

   oZIndex=obj.style.zIndex;

 

  obj.style.cursor="move";

 

  obj.style.zIndex=10000;

 

 oldX=event.clientX;

 

 oldY=event.clientY;

 

 oldLeft=obj.style.pixelLeft;

 

 oldTop=obj.style.pixelTop; 

 

 //移动的时候是否可选中内容

 

 obj.οndragstart="return false";

 

  obj.οndrag="return false";

 

 obj.οnselect="document.selection.empty()"; 

 

 

 tobj.οnmοusemοve=function(){ //开始移动

 

 if(event.button==1){

 

 obj.style.pixelLeft=oldLeft+event.clientX-oldX; //新的位置=老位置+鼠标的新位置-鼠标的老位置

 

  obj.style.pixelTop=oldTop+event.clientY-oldY;

 

  scrollX=obj.style.pixelLeft-document.body.scrollLeft;

 

  scrollY=obj.style.pixelTop-document.body.scrollTop;

 

  if(outlineAble){  //不出界

 

  var pl=obj.style.pixelLeft;

 

  var pt=obj.style.pixelTop;

 

  if(pl<=0){

 

  obj.style.pixelLeft=0; 

 

  }

 

  if(pt<=0){

 

  obj.style.pixelTop=0; 

 

  }

 

  }

 

 }

 

 }

 

 tobj.οnmοuseup=function(){ //清场

 

 obj.releaseCapture; //释放鼠标

 

 obj.οnmοuseup=null;

 

 obj.οnmοusemοve=null;

 

 obj.style.zIndex=oZIndex;

 

 obj.style.cursor="normal";

 

 }

 

 }

 

 if(scrollAble){

 

 document.body.οnscrοll=function(){

 

 obj.style.pixelLeft=scrollX+document.body.scrollLeft;

 

 obj.style.pixelTop=scrollY+document.body.scrollTop;

 

  } 

 

 }

 

 }

 

</script>