vue实现 可拖拽的div

这个功能不一定非要vue实现嘿嘿，其实就是这个逻辑，html + css + js 也可以这样做的~

首先先写好你的那一块东西，调好样式哈，我的是一组按钮：

<div class="arrow-container" @mousedown=arrowMove>
  <Button type="primary" shape="circle" icon="ios-arrow-forward" ghost size="small" @click="leftShow()">Button><br>
  <Button type="primary" shape="circle" icon="md-add" ghost size="small" @click="allShow()">Button><br>
  <Button type="primary" shape="circle" icon="ios-arrow-back" ghost size="small" @click="rightShow()">Button>
div>

.arrow-container {
  background-color: #ecf5ff;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 0;
  margin-right: 5px;
  bottom: 0;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  z-index: 10;
  cursor: move;
}

长这样：

在我的页面右下角，定位使用的是right 和 bottom ，所以在鼠标拖动他们的时候，也要调整right和bottom，如果调整的是left，由于right: 0; div会被拉的很大哦

在上面我已经为div绑定好鼠标按下事件啦：

<div class="arrow-container" @mousedown=arrowMove>
...
div>

接下来可以写我们的函数啦

不，在写之前我们可以分析一波，需要哪些数据，我们的最终目的是根据鼠标移动的位置，求出当鼠标抬起时，div应设置的的right和bottom，故：

有亿点点丑。。

W: 窗口宽度
elW：元素宽度
X：鼠标移动前位置横坐标
L: 元素位置横坐标
X2： 鼠标移动后位置横坐标

H: 窗口高度
elH：元素高度
Y：鼠标移动前位置纵坐标
T: 元素位置纵坐标
Y2： 鼠标移动后位置纵坐标

绿色是我们要求的值，红色蓝色等都是我们可以获取到的，其中红色的X、Y是在鼠标移动前，鼠标的位置，X2、Y2是鼠标移动后的位置，所以，我们要在鼠标按下后，移动前，就存好图中的 ( X - L ) 和 ( Y - T )

差不多想好了可以写啦：

arrowMove (e) {
  // 元素大小
  let elW = e.currentTarget.offsetWidth
  let elH = e.currentTarget.offsetHeight
  // 元素位置
  let elL = e.currentTarget.offsetLeft
  let elT = e.currentTarget.offsetTop
  // 鼠标位置
  let x = e.clientX
  let y = e.clientY
  // 窗口大小
  let w = window.innerWidth
  let h = window.innerHeight
  // 鼠标到元素左边距离
  let moveX = x - elL
  let moveY = y - elT
  let el = e.currentTarget
  document.onmousemove = function (e) {
    el.style.right = w - (e.clientX - moveX) - elW + 'px'
    el.style.bottom = h - (e.clientY - moveY) - elH + 'px'
  }
  document.onmouseup = function () {
    document.onmousemove = null
    document.onmouseup = null
  }
}

over!!