Vue自定义指令实现拖拽功能

Vue自定义拖拽指令

1、HTML代码

<div id='app'>
  <!-- v-drag 是自定义指令，加上该指令的元素，可以被自由拖拽 -->
  <div class="box" v-drag></div>
</div>

2、CSS 代码

.box {
  width: 150px;
  height: 150px;
  background: orange;
}

3、Vue 代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  // 自定义指令 v-drag
  Vue.directive('drag', function(el) {
    el.style.position = 'absolute'
    el.onmousedown = function(ev) {
      console.log(ev)
      // 用元素距离视窗的X、Y坐标，减去el元素最近的相对定位父元素的left、top值
      var sX = ev.clientX - el.offsetLeft
      var sY = ev.clientY - el.offsetTop
      document.onmousemove = function(ev) {
        var eX = ev.clientX - sX
        var eY = ev.clientY - sY
        // 不断地更新元素的left、top值
        el.style.left = eX + 'px'
        el.style.top = eY + 'px'
      }
      document.onmouseup = function() {
        // 清除mousemove事件
        document.onmousemove = null
      }
    }
  })
  // 创建Vue实例
  var app = new Vue({el: '#app'})
</script>

参考资源：Vue.js 自定义指令

END 2020-01-08