使用js原生实现拖拽功能

使用js原生实现拖拽功能

这是在无意中看到别人写这个功能,自己也试了一下,他写的不是很全,我依照她的思路把代码补了一下,我是在vue框架中写的小例子,上代码吧!
HTML部分

<template>
  <div>
    <div class="toudong"> 
      <img id="p3" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=7790568,3102770366&fm=26&gp=0.jpg" alt=""/> 
    </div>
  </div>
</template>

JS部分
代码我没有细细规划,直接把所有逻辑都搬过来了,其中自己在调试的打印没有删除,不影响效果

mounted () {
    var p3 = document.getElementById("p3")
    var left0  
    var top0
    console.log(left0+'-'+top0)
    var offsetX
    var offsetY
    var x0
    var y0
     p3.ondragstart=function(e){  
        console.log('事件源p3开始拖动');  
        //记录刚一拖动时，鼠标在飞机上的偏移量  
        offsetX= e.offsetX;  
        offsetY= e.offsetY;  
        x0= e.pageX;  
        y0= e.pageY;
        left0 = parseFloat(window.getComputedStyle(p3).left)   //获取拖动开始时的,定位left值
        top0 = parseFloat(window.getComputedStyle(p3).top)  //获取拖动开始时的,定位top值
    }  
    p3.ondrag=function(e){  
        console.log('事件源p3拖动中');  
        var x= e.pageX;  
        var y= e.pageY;  
        console.log(x+'-'+y);  
        console.log(offsetX+'-'+offsetY)
        //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0  
        if(x==0 || y==0){  
            return; //不处理拖动最后一刻X和Y都为0的情形  
        }  
        // x-=offsetX;  
        // y-=offsetY;  
        console.log(x+'-'+x0+'+'+left0)
        console.log(y+'-'+y0+'+'+top0)
        var left = x-x0+left0
        var top = y-y0+top0
        console.log(left)
        console.log(top)
        p3.style.left=left+'px';  
        p3.style.top=top+'px';  
    }  
    p3.ondragend=function(){  
        console.log('源对象p3拖动结束');  
    }
  }

SCSS部分

.toudong{
  width: 70%;
  height: 300px;
  margin: 0 auto;
  position: relative;
  img{  
    position:absolute;
    left: 20px;
    top:20px;
  }
}

动态效果图就不上了,你可以直接复制代码,看效果.
其实这只是一个简单地效果,还可以加上在盒子中拖动不能越界逻辑.
希望对你有帮助,欢迎留言一起讨论