小球拖动原理
有很多初学者不知道小球拖动是什么怎么来做 当然是用js了啊 呆比
#这里是body部分↓
<div id="box></div>
这里是style部分↓
#box{
width: 250px;//宽度按照需求
height: 250px;//高也一样
border: 1px solid red;
position: absolute;//添加定位才可以使div可以拖动
left: 0;
top: 0;
background: red;
border: none;
border-radius: 50%; //边框圆角
}
下面最重要的js来了↓
window.onload=function(){ //等待浏览器加载完毕
var Box=document.querySelector("#box")//获取dom节点 "#box"(因为我的id是box)
//操作dom元素
Box.onmousedown=function(ev){ //获取的box鼠标按下事件按下时候求出光标距离小块的距离
var Event=ev||event
var disX=Event.clientX-Box.offsetLeft
var disY=Event.clientY-Box.offsetTop
document.onmousemove=function(ev){//移动时计算出左边 上边的距离
var Event=ev||event
var l=Event.clientX-disX
var t=Event.clientY-disY
Box.style.left=l+"px"
Box.style.top=t+"px"
}
document.onmouseup=function(){// 抬起移动事件去除掉抬起事件也要去除掉
document.onmousemove=null
}
return false//阻止默认事件
}
}