用js怎么在网页中实现多图片自由移动-白红宇

用js怎么在网页中实现多图片自由移动

阅读量：5085 次

发布时间：2019-06-13

本文共 1366 字，大约阅读时间需要 4 分钟。

<!DOCTYPE html>

<html>

<head>

div{

position: absolute;

width: 200px;

height: 200px;

background-color: #ccc;

}

</style>

</head>

我是可以被拖拽的

</div>

我是可以被拖拽的

</div>

var div = document.getElementsByTagName('div')[0];

var mouseX = 0,mouseY=0;

var divY = 0;//parseInt(div.style.top); //当前元素与窗口左上角距离

var divX = 0;//parseInt(div.style.left);

console.info(div.style.top,div.style.left);

div.onmousedown =function(e){

//鼠标按下：

//1.获取当前元素的位置

//2.获取鼠标的位置

divY = parseInt(div.style.top); //当前元素与窗口左上角距离

divX = parseInt(div.style.left);

e = e || event;

mouseX = e.clientX;

mouseY = e.clientY;

console.info(mouseX,mouseY);

//记录当前鼠标的位置

//div.onmousemove = function(e){

document.onmousemove = function(e){

e = e || event;

//获取鼠标的新位置

var currentX = e.clientX;

var currentY = e.clientY;

//计算元素的新位置

var divNewX = divX - mouseX + currentX;

var divNewY = divY - mouseY + currentY;

div.style.top = divNewY + "px";

div.style.left = divNewX + "px";

console.info("onmousemove",divNewX,divNewY);

}

div.onmouseup =function(e){

//div.onmousemove = null;

document.onmousemove = null;

console.info("onmouseup")

}

</script>

</body>

</html>

转载于:https://www.cnblogs.com/Ilovewenxin/p/5543965.html

你可能感兴趣的文章