自定義拖拽div,不超出父級(使用自定義指令)

  • 在main.ts 文件中添加自定義指令
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import piniaStore from "@/store";
import "@/assets/styles/index.scss"
import {useAccountInfoStore} from "@/store/accountInfoStore";
InitCustomConfig().then(config => {
  const app = createApp(App)
      .use(piniaStore)
      .use(router)
      .use(i18n)
  document.title = config.logoConfig?.systemTitle ?? ""
  // 自定義指令--拖拽
  app.directive('drag',(el) => {
    let oDiv = el // 當前元素
    // let self = this // 上下文
    // 禁止選擇網(wǎng)頁上的文字
    document.onselectstart = function () {
      return false
    }
    oDiv.onmousedown = function (e:any) {
      oDiv.style.cursor = 'move'
      let parentWidth = oDiv.parentElement.offsetWidth
      let parentHeight = oDiv.parentElement.offsetHeight
      let oDivWidth = oDiv.offsetWidth
      let oDivHeight = oDiv.offsetHeight
      // 鼠標按下,計算當前元素距離可視區(qū)的距離
      let disX = e.clientX - oDiv.offsetLeft
      let disY = e.clientY - oDiv.offsetTop
      document.onmousemove = function (e) {
        let left:number = e.clientX - disX
        let top:number = e.clientY - disY
        // 通過事件委托,計算移動的距離
        if(left < 0) {
          left = 0
        }
        if(top < 0) {
          top = 0
        }
        if(left + oDivWidth > parentWidth) {
          left = parentWidth - oDivWidth
        }
        if(top + oDivHeight > parentHeight) {
          top = parentHeight - oDivHeight
        }
        let right = parentWidth - left - oDivWidth
        let bottom = parentHeight - top - oDivHeight
        //移動當前元素
        oDiv.style.right = right + "px";
        // oDiv.style.bottom = bottom + "px";
        oDiv.style.top = top + "px";
      }
      document.onmouseup = function (e) {
        oDiv.style.cursor = 'default'
        document.onmousemove = null
        document.onmouseup = null
      }
      // return false不加的話可能導致黏連,就是拖到一個地方時div粘在鼠標上不下來孤个,相當于onmouseup失效
      return false
    }
    }
  );
  // 自定義指令--按鈕權限
  app.directive('permission',
    (el, binding) => {
      if (useAccountInfoStore().account.authority) {
        if (useAccountInfoStore().account.authority?.indexOf(binding.value) === -1 && useAccountInfoStore().account.authority?.indexOf("admin") === -1) {
          el.parentNode && el.parentNode.removeChild(el)
        }
      }
    }
  );

}).catch(err => {
  console.log(err);
})

  • 在組件中使用
<template>
<div class="parents-box" v-drag >
  <div class="sub-box">
    可拖拽盒子
  </div>
  
</div>
</template>
<script lang='ts' setup>
import { ref, reactive,watch } from 'vue'
import { $ref } from 'vue/macros';

</script>
<style scoped lang='scss'>
.parents-box {
  width: 100%;
  height: 100%;
  position: relative;
  .sub-box{
     position: absolute;
     right: 10px;                   
     top: 10px;
     width: 300px;
     height: 200px;
     user-select: none;
     z-index: 2; 
  }
}
</style>

  • 注意:
    1.在定義自定義拖拽指令時設置 oDiv.style.right/oDiv.style.left oDiv.style.top/oDiv.style.bottom 的方向 在div元素上使用的時候css中的 right/left top/bottom 也需要保持一致 (要使用position: absolute;)
    2.使用的div元素 css中 z-index需要設置的大一些 避免權重不夠 拖拽時導致沒有效果
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末涕蜂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子撕瞧,更是在濱河造成了極大的恐慌县匠,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斯议,死亡現(xiàn)場離奇詭異产捞,居然都是意外死亡,警方通過查閱死者的電腦和手機哼御,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門坯临,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恋昼,你說我怎么就攤上這事尿扯。” “怎么了焰雕?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長芳杏。 經(jīng)常有香客問我矩屁,道長,這世上最難降的妖魔是什么爵赵? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任吝秕,我火速辦了婚禮,結果婚禮上空幻,老公的妹妹穿的比我還像新娘烁峭。我一直安慰自己,他們只是感情好秕铛,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布约郁。 她就那樣靜靜地躺著,像睡著了一般但两。 火紅的嫁衣襯著肌膚如雪鬓梅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天谨湘,我揣著相機與錄音绽快,去河邊找鬼。 笑死紧阔,一個胖子當著我的面吹牛坊罢,可吹牛的內容都是我干的。 我是一名探鬼主播擅耽,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼活孩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了乖仇?” 一聲冷哼從身側響起诱鞠,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤挎挖,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后航夺,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蕉朵,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年阳掐,在試婚紗的時候發(fā)現(xiàn)自己被綠了始衅。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡缭保,死狀恐怖汛闸,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情艺骂,我是刑警寧澤诸老,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站钳恕,受9級特大地震影響别伏,放射性物質發(fā)生泄漏。R本人自食惡果不足惜忧额,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一厘肮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧睦番,春花似錦类茂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至示启,卻和暖如春碴巾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背丑搔。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工厦瓢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人啤月。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓煮仇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親谎仲。 傳聞我的和親對象是個殘疾皇子浙垫,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容