小球拖动原理

小球拖动原理

有很多初学者不知道小球拖动是什么怎么来做 当然是用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//阻止默认事件
        }
    }

现在你已经是一个合格的伸手党了！赶紧去试试吧！