免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

小編這次要給大家分享的是用實例分析Vue使用自定義指令實現拖拽行為,文章內容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。

創新互聯建站長期為超過千家客戶提供的網站建設服務,團隊從業經驗10年,關注不同地域、不同群體,并針對不同對象提供差異化的產品和服務;打造開放共贏平臺,與合作伙伴共同營造健康的互聯網生態環境。為沙坪壩企業提供專業的成都做網站、成都網站設計,沙坪壩網站改版等技術服務。擁有10年豐富建站經驗和眾多成功案例,為您定制開發。

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

需求

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

<div  v-drag>
  XXXX
</div>

更重要的一個需求點:

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

比如:

<div  v-drag>
   <el-button @mousedown.native.stop>test</el-button>
</div>

曾經使用過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使用自定義指令實現拖拽行為的文章,如果覺得文章內容寫得不錯的話,可以把它分享出去給更多人看到。

文章名稱:用實例分析Vue使用自定義指令實現拖拽行為
網站網址:http://m.newbst.com/article26/ijhocg.html

成都網站建設公司_創新互聯,為您提供手機網站建設網站營銷小程序開發軟件開發網站內鏈微信小程序

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都定制網站網頁設計