在vue中实现自定义拖动指令

接下来要讲的是如何在vue中实现元素拖动，并且拿到拖动元素相对于父元素的位置偏移量X、Y

下面我们看下页面的基本结构吧，我们结合图来介绍这个东西会好理解的多

image

上面看到了页面基本结构。container就是我们说的相对父元素，drager就是要被我们拖动的元素，相信这个结构大家都心里有数

接下来，我们使用自定义指令去实现这个功能,这里还不清楚自定义指令内容的同学请看官网 : https://cn.vuejs.org/v2/guide/custom-directive.html

官网对自定义指令的实现以及生命周期说的很清楚了

下面我们想一个问题，怎么拿到drager元素相对于父元素的偏移量？这个问题如果解决了，那就OK了。

为了解决这个问题，也是想了很多，下面请看我画的图

image

这里我们要清楚一点。那就是我们每次在不同的位置点击拖拽元素的时候，点击的坐标都是新的，我们从鼠标 按下-->拖动->松开 是一个完整的过程，每一次都是新的一个完整过程。

接下来请仔细看下面两个代码

oDiv.onmousedown =function (e) {
//  鼠标按下，计算当前元素距离可视区的距离
  let disX = e.clientX - oDiv.offsetLeft
---------------------------------------------------------    
document.onmousemove =function (e) {
  let l = e.clientX - disX

当鼠标按下的时候，我们用鼠标触发事件的坐标(对于body/可视区域) - 拖拽元素距离container(父级元素)的距离 S1

再看第二段代码：当鼠标在按住后发生推拽时触发的事件-> 拖动鼠标时鼠标的clientX - S1，你们可以画图或者脑补，就会发现这个差值就是推拽元素相对父级元素拖拽后的距离!

弄懂这点就好办了。下面看我们直接看代码

Vue.directive('drag', {

  inserted (el, binding) {

    let oDiv =el

//  左边距最大值   
    let maxLeft = el.parentNode.clientWidth -el.clientWidth

//  上边距最大值    
    let maxTop = el.parentNode.clientHeight - el.clientHeight

    oDiv.onmousedown = function (e) {
//  鼠标按下，计算当前元素距离可视区的距离
      let disX = e.clientX - oDiv.offsetLeft

      let disY = e.clientY - oDiv.offsetTop

      document.onmousemove =function(e) {

//  获取到鼠标拖拽后的横向位移(距离父级元素)        
    let l = e.clientX -disX

//  获取到鼠标拖拽后的纵向位移(距离父级元素)
    let t = e.clientY -disY

    oDiv.style.left  = l + 'px'

    oDiv.style.top  = t + 'px'

    if(e.clientX - disX <= 0) { oDiv.style.left = 0 + 'px'}

    if(e.clientY - disY <= 0) { oDiv.style.top = 0 + 'px'}

    if(e.clientX - disX >= maxLeft) { oDiv.style.left = maxLeft + 'px'}

    if(e.clientY - disY >= maxTop) { oDiv.style.top = maxTop + 'px'}

//    将此时的位置传出去

binding.value({x: oDiv.style.left, y: oDiv.style.top}) }

//    松开事件后，移除事件

       document.onmouseup  =function (e) { 
         document.onmousemove =null 
         document.onmouseup =null
       }
    }
  }
})

------------------------------------------------------------------------------------------------------

//  我们可以在函数中拿到指令传出来的数据对象

  greet(obj){
    console.log(obj)
  }

这是我的个人笔记，希望对你有帮助。