js实现控件拖拽

来源：互联网发布：windows系统下载地址编辑：程序博客网时间：2024/05/21 17:39

<HTML><HEAD><TITLE>Rays Drag Test</TITLE><!-- 简单实现，没有使用对父组件相对坐标，鼠标位置没有记录相对控件边缘的位置 --><script language="javascript">function DragObj(){var flag=0;//0:no,1:yesvar x=0;var y=0;}var dEvt = new DragObj();function down(obj){//拖拽开始dEvt.flag = 1;//记录点击时鼠标坐标dEvt.x = event.x;dEvt.y = event.y;obj.setCapture(); //得到鼠标}function moving(obj){if(event.button==1){   if (dEvt.flag==1)   {    obj.style.position = "absolute";    //更新控件位置：新位置=鼠标位置-控件宽（高）/2    obj.style.left = event.x-obj.style.pixelWidth/2;    obj.style.top = event.y-obj.style.pixelHeight/2;   }}}function up(obj){dEvt.flag=0;obj.releaseCapture();}</script></HEAD><BODY><input type="button" value="Rays Drag" style="height:100;width:100" onMouseDown="down(this);" onMouseMove="moving(this);" onMouseUp="up(this);" /></BODY></HTML>