js实现控件拖拽

最新推荐文章于 2023-06-29 17:56:36 发布

sjiang

最新推荐文章于 2023-06-29 17:56:36 发布

阅读量3.6k

点赞数

分类专栏： javascript 文章标签： function button up

本文链接：https://blog.csdn.net/sjiang2142/article/details/6672680

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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>

sjiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
js实现控件拖拽

Rays Drag Testfunction DragObj(){var flag=0;//0:no,1:yesvar x=0;var y=0;}var dEvt = new DragObj();function down(obj)
复制链接

扫一扫