JS实现DIV的拖拽

最新推荐文章于 2023-05-17 14:10:14 发布

DrugScropion

最新推荐文章于 2023-05-17 14:10:14 发布

阅读量517

点赞数

分类专栏： JS|JQ|CSS 文章标签： div function javascript html

本文链接：https://blog.csdn.net/ScorpionFZ/article/details/6736933

版权

JS|JQ|CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>JavaScript实现Html元素的拖拽</title>

<script language=javascript>
var diffx,diffY;
var objDiv;
function beginDrag()
{
objDiv = document.getElementById("div1");
diffX = event.clientX -objDiv.offsetLeft; 
diffY = event.clientY - objDiv.offsetTop;
document.body.attachEvent("onmousemove",mousemove);
document.body.attachEvent("onmouseup",removeEvent);


}
function mousemove()
{

objDiv.style.left = event.clientX-diffX;
objDiv.style.top =event.clientY-diffY;

}
function removeEvent()
{
objDiv = window.event.srcElement;
document.body.detachEvent("onmousemove",mousemove);
document.body.detachEvent("onmouseup",removeEvent)
}

</script> 
</head>
<body>
<p >JavaScript实现DIV的拖拽<div id="div1" style="background-color:Blue; width:100px; height:100px; position:absolute;" οnmοusedοwn="beginDrag()"></div></p>

</body>
</html>

DrugScropion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现DIV的拖拽

JavaScript实现Html元素的拖拽var diffx,diffY;var objDiv;function beginDrag(){objDiv = document.getElementById("div1");diffX = event.clientX
复制链接

扫一扫