【JavaScript】画面元素（图片）可拖动的技术实现

最新推荐文章于 2024-07-08 16:22:29 发布

siyue_qi

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量497

点赞数

分类专栏：网页设计 JavaScript 文章标签： javascript function div class

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

网页设计

4 篇文章 0 订阅

订阅专栏

这个关键是用好3个事件，一个是onmousedown一个是onmousemove一个是onmouseup
onmousedown记录当前鼠标所触发的对象，在onmousemove所触发的方法中进行移动，onmouseup放下拖动的对象。

代码：

<script language="javascript">
var checkMoving;
function divMove(){
    checkMoving = false;
    document.οnmοusedοwn=startMove;
    document.οnmοusemοve=moveObj;
    document.οnmοuseup=new Function("checkMoving = false");
}

function startMove(){
    if(event.srcElement.className!="imgObj") return;
    checkMoving=true;
    Xdiff=event.clientX-event.srcElement.style.pixelLeft;
    Ydiff=event.clientY-event.srcElement.style.pixelTop;
}

function moveObj(){
    if(!checkMoving) return true;
    event.srcElement.style.pixelLeft=event.clientX-Xdiff;
    event.srcElement.style.pixelTop=event.clientY-Ydiff;
    return false;
}
</script>

<body style="margin: auto;" onLoad="divMove();">
<div style="left:0;top:0;position:relative;overflow:hidden;width:100%;height:100%" id="div1">
<img src="default.gif" style="position:relative;left:0px;top:0px;width:100px;height:100px;cursor:hand;" class=imgObj>
</div>
</body>

siyue_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】画面元素（图片）可拖动的技术实现

这个关键是用好3个事件，一个是onmousedown一个是onmousemove一个是onmouseuponmousedown记录当前鼠标所触发的对象，在onmousemove所触发的方法中进行移动，onmouseup放下拖动的对象。代码： var checkMoving; function divMove(){ checkMoving = false; document.onmo
复制链接

扫一扫