console
Object.prototype.createMoveBox = createMoveBox
Object.prototype.showIndex = showIndex
function createMoveBox(){
let self = this
self.addEventListener('mousedown',divDown)
function divDown(e){
let downX = e.pageX-parseFloat(getComputedStyle(self,null).left);
let downY = e.pageY-parseFloat(getComputedStyle(self,null).top);
document.addEventListener('mousemove',docMove)
document.addEventListener('mouseup',docUp)
function docMove(e){
let offsetX = e.pageX-downX;
let offsetY = e.pageY-downY;
self.style.left = offsetX+'px'
self.style.top = offsetY+'px'
}
function docUp(e){
document.removeEventListener('mousemove',docMove)
}
let high = parseFloat(getComputedStyle(divs[0],null).zIndex)
for(let item of divs){
let temp = parseFloat(getComputedStyle(item,null).zIndex)
if( temp > high){
high = temp
}
}
self.style.zIndex = high+1
}
}
function showIndex(){
this.addEventListener('dblclick',()=>{
let val = this.getAttribute('my-index')
let inputVal = window.prompt(`请输入你的姓名`)
if(inputVal.length>4){
alert('名字太长！！！')
return;
}
if(inputVal){
this.innerHTML = inputVal+':'+val
}
})
}
function createDiv(num,fun){
let ranNum = (num=1)=>{
return Math.random()*num
}
for(let i = 0; i < num; i++){
let color = `rgba(${ranNum(255)},${ranNum(255)},${ranNum(255)},${ranNum()+0.5})`
let div = document.createElement('div')
div.setAttribute('my-index',i)
div.style.background = color
div.style.left = ranNum(window.innerWidth-100)+'px'
div.style.top = ranNum(window.innerHeight-100)+'px'
document.body.appendChild(div)
}
fun&&fun()
}
let divs;
createDiv(56,()=>{
divs = document.querySelectorAll('div')
divs.forEach(item=>{
item.createMoveBox()
item.showIndex()
})
})
<body>
</body>
body,html{background:rgb(d,d,d)}
div{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:orangered;
border-radius:50%;
box-shadow:0 0 10px 2px rgba(0,0,0,0.7);
position:absolute;
left:0;
top:0;
user-select:none;
z-index:1;
color:white;
cursor:pointer;
}