位置随机且可拖动的小方块
Posted myhanyu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了位置随机且可拖动的小方块相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80px;
height:80px;
position:absolute;
}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
}
function createEle(){
var oDiv=document.createElement(‘div‘);
oDiv.style.background=‘rgb(‘+rnd(0,256)+‘,‘+rnd(0,256)+‘,‘+rnd(0,256)+‘)‘;
oDiv.style.left=rnd(0,1600)+‘px‘;
oDiv.style.top=rnd(0,700)+‘px‘;
return oDiv;
}
window.onload=function() {
for(var i=0;i<rnd(20,40);i++){
var oDiv=createEle();
document.body.appendChild(oDiv);
}
var aDiv=document.getElementsByTagName(‘div‘);
document.onmousedown=function(ev){
var oEvent=ev||event;
var oTarget=oEvent.target||oEvent.srcElement;
if(oTarget.tagName==‘DIV‘){
var disX=oEvent.clientX-oTarget.offsetLeft;
var disY=oEvent.clientY-oTarget.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oTarget.style.left=l+‘px‘;
oTarget.style.top=t+‘px‘;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
return false;
}
}
}
</script>
</head>
<body>
</body>
</html>
以上是关于位置随机且可拖动的小方块的主要内容，如果未能解决你的问题，请参考以下文章