js实现控件拖拽

 
<HTML>
<HEAD>
<TITLE>Rays Drag Test</TITLE>

<!-- 简单实现,没有使用对父组件相对坐标,鼠标位置没有记录相对控件边缘的位置 -->

<script language="javascript">
function DragObj()
{
var flag=0;//0:no,1:yes
var 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>


你可能感兴趣的:(function,UP,button)