javascript - 多个小方块拖拽如何循环？
本文介绍了javascript - 多个小方块拖拽如何循环？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
一个小方块拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
</head>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
#div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<body>
<div id="div"></div>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div");
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
alert(w+'+'+h);
odiv.onmousedown=function(e){
var oe=e||event;
var divX=oe.clientX-odiv.offsetLeft;
var divY=oe.clientY-odiv.offsetTop;
document.onmousemove=function(e){
var oe=e||event;
_left=oe.clientX-divX;
_top=oe.clientY-divY;
if(_top<0){
_top=0;
}else if(_top>h-100){
_top=h-100
}
if(_left<0){
_left=0;
}else if(_left>w-100){
_left=w-100;
}
odiv.style.left=_left+'px';
odiv.style.top=_top+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
}
}
</script>
</body>
</html>现在问题是如果有多个div小方块该怎么循环实现每个都可以拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
</head>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
div{ width:100px; height:100px; background:red; position:absolute;}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementsByTagName("div");
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
alert(w+'+'+h);
odiv.onmousedown=function(e){
var oe=e||event;
var divX=oe.clientX-odiv.offsetLeft;
var divY=oe.clientY-odiv.offsetTop;
document.onmousemove=function(e){
var oe=e||event;
_left=oe.clientX-divX;
_top=oe.clientY-divY;
if(_top<0){
_top=0;
}else if(_top>h-100){
_top=h-100
}
if(_left<0){
_left=0;
}else if(_left>w-100){
_left=w-100;
}
odiv.style.left=_left+'px';
odiv.style.top=_top+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
}
}
</script>
</body>
</html>怎么改？
解决方案
可以试试下面的代码，看看是不是你想要的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<script type="text/javascript">
window.onload=function(){
var oBtn = document.querySelector("#allDiv");
var dDiv = oBtn.querySelectorAll("div");
for(var i=0;i<dDiv.length;i++){
dDiv[i].onmousedown=function(e){
var oe=e||event;
var divCur=document.getElementById(oe.target.id);
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
var divX=oe.clientX-divCur.offsetLeft;
var divY=oe.clientY-divCur.offsetTop;
document.onmousemove=function(e){
var oe=e||event;
_left=oe.clientX-divX;
_top=oe.clientY-divY;
if(_top<0){
_top=0;
}else if(_top>h-100){
_top=h-100
}
if(_left<0){
_left=0;
}else if(_left>w-100){
_left=w-100;
}
divCur.style.left=_left+'px';
divCur.style.top=_top+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
oe.preventDefault();
}
}
}
</script>
</head>
<style type="text/css">
*{ padding:0; margin:0; list-style:none;}
#div{ width:100px; height:100px; background:red; position:absolute;}
#div1{ width:100px; height:100px; background:green; position:absolute;}
#div2{ width:100px; height:100px; background:yellow; position:absolute;}
</style>
<body id="allDiv">
<div id="div"></div>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>这篇关于javascript - 多个小方块拖拽如何循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
