JS中使用DOM-Drag捕捉组件位置坐标

最新推荐文章于 2021-06-03 00:45:26 发布

wj603201

最新推荐文章于 2021-06-03 00:45:26 发布

阅读量767

点赞数 1

分类专栏： JavaScript 文章标签： HTML

本文链接：https://blog.csdn.net/wj603201/article/details/83458046

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS中使用DOM-Drag捕捉组件位置坐标
1.使用Drag.init设置被拖放的组件；
2.调用组件的onDrag、onDragStart、onDragEnd方法分别取得组件拖放过程中、开始拖放时、结束拖放时的位置坐标。

DOMDragEx7.html:
程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DOM-Drag ex7</title>
<script type="text/javascript" src="js/dom-drag.js"></script>
<script type="text/javascript" src="js/DOMDragEx7.js"></script>
<style type="text/css">
#box {
position:absolute;
width:400px;
height:400px;
border:#000000 1px dashed;
}

#msg1 {
margin-top:200px;
margin-left:420px;
}

#msg2 {
margin-top:10px;
margin-left:420px;
width:260px;
}
</style>
</head>
<body>
<div id="box" style="top:20px;left:20px;">
<img id="b" src="images/b.gif" style="position:absolute; top:50px; left:50px;" />
<img id="g" src="images/g.gif" style="position:absolute; top:200px; left:70px;" />
<img id="p" src="images/p.gif" style="position:absolute; top:300px; left:350px;" />
</div>
<textarea id="msg1" rows="10" cols="30" readonly="readonly"></textarea>
<form action="">
<input id="msg2" readonly="readonly" />
</form>
</body>
</html>

DOMDragEx7.js:
程序代码

window.onload = function() {
var b = document.getElementById("b");
var g = document.getElementById("g");
var p = document.getElementById("p");

var msg1 = document.getElementById("msg1");
var msg2 = document.getElementById("msg2");

Drag.init(b);
Drag.init(g);
Drag.init(p, null, 0, 374, 0, 374);

b.onDragStart = function(x, y) {
reportDragStart("black", x, y);
}

g.onDragStart = function(x, y) {
reportDragStart("green", x, y);
}

p.onDragStart = function(x, y) {
reportDragStart("purple", x, y);
}

b.onDragEnd = function(x, y) {
reportDragEnd("black", x, y);
}

g.onDragEnd = function(x, y) {
reportDragEnd("green", x, y);
}

p.onDragEnd = function(x, y) {
reportDragEnd("purple", x, y);
}

b.onDrag = function(x, y) {
reportDrag("black", x, y);
}

g.onDrag = function(x, y) {
reportDrag("green", x, y);
}

p.onDrag = function(x, y) {
reportDrag("purple", x, y);
}

function reportDragStart(name, x, y) {
msg1.value += name + ": onDragStart (" + x + "," + y + ")\n";
}

function reportDragEnd(name, x, y) {
msg1.value += name + ": onDragEnd (" + x + "," + y + ")\n";
}

function reportDrag(name, x, y) {
msg2.value = name + ": onDrag (" + x + "," + y + ")\n";
}
}

wj603201

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中使用DOM-Drag捕捉组件位置坐标

JS中使用DOM-Drag捕捉组件位置坐标1.使用Drag.init设置被拖放的组件；2.调用组件的onDrag、onDragStart、onDragEnd方法分别取得组件拖放过程中、开始拖放时、结束拖放时的位置坐标。 DOMDragEx7.html: 程序代码 DOM-Drag ex7 ...
复制链接

扫一扫