VUE001. 拖动div盒子（自定义指令v-directives）

拖动div是一个逻辑很简单的需求，监听容器的鼠标按下松开的事件，执行函数通过DOM改变标签的CSS偏移量。

在VUE构建的项目中，通过标签的 @mousedown 和 @mouseup 赋予行为事件，便可以通过原生JS实现这一需求。

但VUE提供了更加方便的途径

 

  自定义指令    节选自官方文档

“ 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 ”

 

可以看到 v-model 和 v-show 都是通过这一功能实现的，足以见得其内核的强大与便利。

于是我们就可以赋予标签一个自定义指令 v-drag ，来为任何想要拖动交互的盒子添加拖动事件。

---

以下为参考 vue实现拖动div元素 的代码

<div v-drag></div>

.drag{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}

// 自定义指令 —— 拖动div
    directives: {
      drag(el, bindings) {
        el.onmousedown = function(e) {
          var disx = e.pageX - el.offsetLeft
          var disy = e.pageY - el.offsetTop
          document.onmousemove = function(e) {
            el.style.left = e.pageX - disx + 'px'
            el.style.top = e.pageY - disy + 'px'
          }
          document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null
          }
        }
      }
    },

 

比起原生JS的好处是，不用再为标签添加多个事件和臃肿的执行函数，只需要在标签上增加自定义指令： v-xxx ( 自定义指令名称 ) ，函数体直接绑定了div的虚拟DOM —— $el 对象，再通过DOM本身的监听事件对其赋予行为处理，简单又省事，且可以轻易复用

不得不说VUE还是有东西的，同样需要复用应用场景的函数也推荐使用自定义指令，如官网举例的input自动聚焦，多用用别人的东西就是自己的了，家人们快用起来✊✊

 

- END -