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

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

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

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

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

 

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

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

其實(shí)這個(gè)拖拽的原理還是很簡單的:

1.首先鼠標(biāo)按下( onmousedown )

  • 記錄目標(biāo)元素當(dāng)前的 left 和 top 值

2.鼠標(biāo)移動(dòng)( onmousemove )

  • 計(jì)算每次移動(dòng)的橫向距離 ( disX ) 和縱向距離 ( disY )
  • 并改變?cè)氐?left ( left = left + disX )和 top ( top = top + disY )值

3.鼠標(biāo)松開( onmouseup )

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

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

容我先普及一哈:

  • clientX :表示鼠標(biāo)當(dāng)前的 X 坐標(biāo)
  • clientY :表示鼠標(biāo)當(dāng)前的 Y 坐標(biāo)

那么偽代碼就是:

  • disX = 鼠標(biāo)按下時(shí)的 clientX - 鼠標(biāo)松開時(shí)的 clientX
  • disY = 鼠標(biāo)按下時(shí)的 clientY - 鼠標(biāo)松開時(shí)的 clientY

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

// 這個(gè)助手方法下面會(huì)用到,用來獲取 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];
    // 鼠標(biāo)手型
    header.style.cursor = 'move';
    header.onmousedown = (e) => {
      // 記錄按下時(shí)鼠標(biāo)的坐標(biāo)和目標(biāo)元素的 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) => {
        // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離,并改變拖拽元素的定位
        const disX = event.clientX - currentX;
        const disY = event.clientY - currentY;
        target.style.left = `${left + disX}px`;
        target.style.top = `${top + disY}px`;
        // 阻止事件的默認(rèn)行為,可以解決選中文本的時(shí)候拖不動(dòng)
        return false;
      }
      // 鼠標(biāo)松開時(shí),拖拽結(jié)束
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  },
  // 每次重新打開 dialog 時(shí),要將其還原
  update(el) {
    const target = el.children[0];
    target.style.left = '';
    target.style.top = '';
  },
  // 最后卸載時(shí),清除事件綁定
  unbind(el) {
    const header = el.children[0].children[0];
    header.onmousedown = null;
  },
};
export default vDrap;

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

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

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

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

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

 

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

// ...
// 以上代碼省略
header.onmousedown = (e) => {
  // ...
  // 以上代碼省略
  // 分別計(jì)算四個(gè)方向的邊界值
  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) => {
    // 鼠標(biāo)移動(dòng)時(shí)計(jì)算每次移動(dòng)的距離,并改變拖拽元素的定位
    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;
  };
}

這樣注冊(cè)之后就可以使用了:

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

總結(jié)

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

相關(guān)文章

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

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

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

    Element Popover 彈出框的使用示例

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

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

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

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

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

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

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

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

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

    vue3 name 屬性的使用技巧詳解

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

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

    大家應(yīng)該都知道父組件可以向子組件通過屬性形式傳遞參數(shù),傳遞的參數(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é)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • vue窗口變化onresize詳解

    vue窗口變化onresize詳解

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

最新評(píng)論