mouse drag

最新推荐文章于 2023-06-30 11:28:10 发布

KyunghakPark

最新推荐文章于 2023-06-30 11:28:10 发布

阅读量848

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/pjx627al/article/details/8815012

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function aaa(){
document.getElementById("myDrag").onmousedown = dragStart;
document.getElementById("myDrag").onmousemove = drag;
document.getElementById("myDrag").onmouseup = dragEnd;
}

var dx = 0;
var dy = 0;

function dragStart() {
var e = document.getElementById("dragDiv");
e.isDrag = true;

var ox = parseInt(e.style.left);
var oy = parseInt(e.style.top);

var mx = event.clientX;
var my = event.clientY;

dx = mx - ox;
dy = my - oy;
}

function drag() {
var e = document.getElementById("dragDiv")
if (e.isDrag) {
var mx = event.clientX;
var my = event.clientY;
e.style.left = (mx - dx) + "px";
e.style.top = (my - dy) + "px";
}
}

function dragEnd() {

var e = document.getElementById("dragDiv")
e.isDrag = false;
}
</script>
</head>

<body οnlοad="aaa();">
<div id="dragDiv" style="width:200px; height:300px; background-color:black; z-index:10; position: relative; left:0px; top:0px;">
<div id="myDrag" style="width:100px; height:100px; background-color:red; z-index:100;"></div>
</div>
</body>
</html>

KyunghakPark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mouse drag

New Document function aaa(){document.getElementById("myDrag").onmousedown = dragStart;document.getElementById("myDrag").onmousemove = drag;document.getElementById("myDrag")
复制链接

扫一扫