原生JS实现元素跟随鼠标拖动事件


html:

<div id='box' style="position:absolute;width:100px;height:100px;background-color:'#ee735c'">
  <div>可拖动div元素div>
div>
JS:

var oDiv=document.getElementById('box')
  oDiv.οnmοusedοwn=function(ev){
    var disX=ev.clientX-oDiv.offsetLeft
    var disY=ev.clientY-oDiv.offsetTop

    document.οnmοusemοve=function(ev){
      var l=ev.clientX-disX
      var t=ev.clientY-disY

      oDiv.style.left=l+'px'
      oDiv.style.top=t+'px'
    }
    document.οnmοuseup=function(){
      document.οnmοusemοve=null;
      document.οnmοuseup=null
    }
  }

你可能感兴趣的:(javascript)