Vue使用自定義指令實現拖拽行為實例分析

本文實例講述了Vue使用自定義指令實現拖拽行為。分享給大家供大家參考，具體如下：

需求

通過自定義指令的方式實現拖拽效果，預期的使用方式為：

  XXXX

更重要的一個需求點：

• 拖拽元素內部的子元素可以自行阻止拖拽行為

比如：

  test

曾經使用過vue-resizable，由於該組件是通過事件捕獲的方式實現的，拖拽元素的子元素也會觸發拖拽行為，不符合開發需求，所以自行實現了拖拽指令，相關源碼如下。

無任何依賴，複製即可使用

源碼

  /**   * @file 自定義拖拽命令   */  import Vue from 'vue';  const Drag = {    install(Vue: any) {      // 如需禁止拖拽元素內部某些元素觸發拖拽，在內部不可觸發拖拽元素上添加@mousedown.native.stop即可      Vue.directive('drag', {        bind(el: any) {          el.style.position = 'absolute';          el.style.zIndex = el.style.zIndex || '3000';        },          inserted(el: any) {          // 設置元素初始位置          const boundingClientRect = el.getBoundingClientRect();          el.style.left = boundingClientRect.x + 'px';          el.style.top = boundingClientRect.y + 'px';          // 將拖拽元素置於body子元素，防止被relative的父元素遮擋          document.body.appendChild(el);            let originX: number;          let originY: number;          const mouseDownHandler = (evt: MouseEvent) => {            originX = evt.clientX - el.offsetLeft;            originY = evt.clientY - el.offsetTop;            el.style.cursor = 'pointer';          };          const mouseMoveHandler = (evt: MouseEvent) => {            if (evt.buttons === 1 && originX && originY) {              el.style.left = evt.clientX - originX + 'px';              el.style.top = evt.clientY - originY + 'px';            }          };          const mouseUpHandler = () => {            el.style.cursor = 'default';          };          el.addEventListener('mousedown', mouseDownHandler);          el.addEventListener('mousemove', mouseMoveHandler);          el.addEventListener('mouseup', mouseUpHandler);          el.__mouseDownHandler__ = mouseDownHandler;          el.__mouseMoveHandler__ = mouseMoveHandler;          el.__mouseUpHandler__ = mouseUpHandler;        },          unbind(el: any) {          el.removeEventListener('mousedown', el.__mouseDownHandler__);          el.removeEventListener('mousemove', el.__mouseMoveHandler__);          el.removeEventListener('mouseup', el.__mouseUpHandler__);          // 當父組件銷燬觸發unbind的時候需要手動刪除這個節點，不然會一直存留在body中          el.parentNode.removeChild(el);        }      });    }  };  Vue.use(Drag);  export default Drag;

希望本文所述對大家vue.js程序設計有所幫助。