欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于Vue 擼一個指令實現(xiàn)拖拽功能

 更新時間:2019年10月09日 10:46:27   作者:Essentric  
這篇文章主要介紹了Vue 指令實現(xiàn)拖拽功能,實現(xiàn)原理很簡單,文中通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

之前擼了一個copy 指令,這次再擼一個拖拽指令。。

具體是個什么蛇皮玩意兒呢,大概就像介樣:

 

emmm。。沒錯,看起來就是如此的雞肋,但是莫得辦法,大佬喜歡啊。

由于我們項目中用的是 element-ui ,所有這個指令只針對 element-ui 的對話框組件哈,如果你們用的別的 ui 庫也有這個需求的,涂涂改改應(yīng)該也能用。。

其實這個拖拽的原理還是很簡單的:

1.首先鼠標按下( onmousedown )

  • 記錄目標元素當前的 left 和 top 值

2.鼠標移動( onmousemove )

  • 計算每次移動的橫向距離 ( disX ) 和縱向距離 ( disY )
  • 并改變元素的 left ( left = left + disX )和 top ( top = top + disY )值

3.鼠標松開( onmouseup )

完成一次拖拽,做一些收尾工作

  • left 和 top 值容易獲取,關(guān)鍵是 disX 和 disY 怎么計算呢?

容我先普及一哈:

  • clientX :表示鼠標當前的 X 坐標
  • clientY :表示鼠標當前的 Y 坐標

那么偽代碼就是:

  • disX = 鼠標按下時的 clientX - 鼠標松開時的 clientX
  • disY = 鼠標按下時的 clientY - 鼠標松開時的 clientY

就這么簡單,好了,下面就開始擼代碼了。

// 這個助手方法下面會用到,用來獲取 css 相關(guān)屬性值
const getAttr = (obj, key) => (
  obj.currentStyle
  ? obj.currentStyle[key]
  : window.getComputedStyle(obj, false)[key]
);
const vDrag = {
  inserted(el) {
   /**
    * 這里是跟據(jù) dialog 組件的 dom 結(jié)構(gòu)來寫的
    * target: dialog 組件的容器元素
    * header:dialog 組件的頭部區(qū)域,也是就是拖拽的區(qū)域
    */
    const target = el.children[0];
    const header = target.children[0];
    // 鼠標手型
    header.style.cursor = 'move';
    header.onmousedown = (e) => {
      // 記錄按下時鼠標的坐標和目標元素的 left、top 值
      const currentX = e.clientX;
      const currentY = e.clientY
      const left = parseInt(getAttr(target, 'left'));
      const top = parseInt(getAttr(target, 'top'));
      document.onmousemove = (event) => {
        // 鼠標移動時計算每次移動的距離,并改變拖拽元素的定位
        const disX = event.clientX - currentX;
        const disY = event.clientY - currentY;
        target.style.left = `${left + disX}px`;
        target.style.top = `${top + disY}px`;
        // 阻止事件的默認行為,可以解決選中文本的時候拖不動
        return false;
      }
      // 鼠標松開時,拖拽結(jié)束
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  // 每次重新打開 dialog 時,要將其還原
  update(el) {
    const target = el.children[0];
    target.style.left = '';
    target.style.top = '';
  },
  // 最后卸載時,清除事件綁定
  unbind(el) {
    const header = el.children[0].children[0];
    header.onmousedown = null;
  },
};
export default vDrap;

這樣就實現(xiàn)了 最簡單 的拖拽了,這樣就 ok 了嗎? 當然不是,這樣會有什么問題呢?就是如果用力過猛把整個彈框都拖到可視區(qū)域之外了,那就摳不出來了。

所以還得完善一下,判斷四個方向的邊界,如果超過邊界值就不動了。邊界值實際上就是在屏幕上能拖動的最大距離也就是 disX 和 disY 的最大值

  • 上邊界: target.offsetTop
  • offsetTop :這里可以表示目標元素( target )上邊框距離頁面頂部的距離
  • 下邊界: body.height - target.offsetTop - header.height
  • header.height :預(yù)留高度,表示往下可以拖到只留下可拖拽區(qū)域在外面
  • 左邊界: target.offsetLeft + target.width - 50
  • offsetLeft :這里可以表示目標元素左邊框距離頁面左邊的距離
  • 50 :表示預(yù)留的寬度,可以自己隨便定只要大于 0 即可,表示往左再怎么拖也會留下 50px 的寬度在外面
  • 右邊界: body.width - target.offsetLeft - 50

這里 50 同上,表示往左再怎么拖也會留下 50px 的寬度在外面

這里計算邊界值的方法有多種,大家可以去嘗試自己的想法。然后我粗略的畫了一個圖,幫助理解,雖然感覺只有我自己看得懂。哈哈。。。

 

下面用代碼實現(xiàn)邊界判斷就 ok了

// ...
// 以上代碼省略
header.onmousedown = (e) => {
  // ...
  // 以上代碼省略
  // 分別計算四個方向的邊界值
  const minLeft = target.offsetLeft + parseInt(getAttr(target, 'width')) - 50;
  const maxLeft = parseInt(getAttr(document.body, 'width')) - target.offsetLeft - 50;
  const minTop = target.offsetTop;
  const maxTop = parseInt(getAttr(document.body, 'height'))
   - target.offsetTop - parseInt(getAttr(header, 'height'));
  document.onmousemove = (event) => {
    // 鼠標移動時計算每次移動的距離,并改變拖拽元素的定位
    const disX = event.clientX - currentX;
    const disY = event.clientY - currentY;
    // 判斷左、右邊界
    if (disX < 0 && disX <= -minLeft) {
     target.style.left = `${left - minLeft)}px`;
    } else if (disX > 0 && disX >= maxLeft) {
     target.style.left = `${left + maxLeft}px`;
    } else {
     target.style.left = `${left + disX}px`;
    }
    // 判斷上、下邊界
    if (disY < 0 && disY <= -minTop) {
     target.style.top = `${top - minTop)}px`;
    } else if (disY > 0 && disY >= maxTop) {
     target.style.top = `${top + maxTop}px`;
    } else {
     target.style.top = `${top + disY}px`;
    }
    return false;
  };
}

這樣注冊之后就可以使用了:

<el-dialog v-drag title="對話框" :visible.sync="dialogVisible"></el-dialog>

總結(jié)

以上所述是小編給大家介紹的Vue 指令實現(xiàn)拖拽功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!

相關(guān)文章

  • Vue實現(xiàn)表格合并與拆分的示例代碼

    Vue實現(xiàn)表格合并與拆分的示例代碼

    在Vue應(yīng)用程序中,表格是一個非常常見的組件,在這篇文章中,我們將介紹如何在Vue中進行表格的合并和拆分,感興趣的小伙伴可以了解一下
    2023-06-06
  • Element Popover 彈出框的使用示例

    Element Popover 彈出框的使用示例

    這篇文章主要介紹了Element Popover 彈出框的使用示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 徹底搞懂Transition內(nèi)置組件

    徹底搞懂Transition內(nèi)置組件

    這篇文章主要為大家介紹了Transition內(nèi)置組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • VueJS事件處理器v-on的使用方法

    VueJS事件處理器v-on的使用方法

    本篇文章主要介紹了VueJS事件處理器v-on的使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 十個有用的自定義Vue鉤子函數(shù)總結(jié)

    十個有用的自定義Vue鉤子函數(shù)總結(jié)

    這篇文章主要為大家介紹了十個Vue.js中有用的自定義鉤子,讓我們的代碼更加好看。文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下
    2022-04-04
  • 使用jenkins一鍵打包發(fā)布vue項目的實現(xiàn)

    使用jenkins一鍵打包發(fā)布vue項目的實現(xiàn)

    這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項目的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-05-05
  • vue3 name 屬性的使用技巧詳解

    vue3 name 屬性的使用技巧詳解

    這篇文章主要為大家介紹了vue3 name 屬性的使用技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue父子組件傳值以及單向數(shù)據(jù)流問題詳解

    vue父子組件傳值以及單向數(shù)據(jù)流問題詳解

    大家應(yīng)該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時隨意修改;但子組件不能修改父組件傳遞過來的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問題的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié))

    這篇文章主要介紹了Vue 通過自定義指令回顧v-內(nèi)置指令(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue窗口變化onresize詳解

    vue窗口變化onresize詳解

    這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08

最新評論