怎么用vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果

這篇文章主要講解了“怎么用vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果”吧！

實(shí)現(xiàn)效果

相關(guān)使用屬性

// clientX 鼠標(biāo)相對(duì)于瀏覽器左上角x軸的坐標(biāo)； 不隨滾動(dòng)條滾動(dòng)而改變；
// clientY 鼠標(biāo)相對(duì)于瀏覽器左上角y軸的坐標(biāo)； 不隨滾動(dòng)條滾動(dòng)而改變；
// element.offsetTop 指 element距離上方或上層控件的位置，整型，單位像素。
// element.offsetLeft 指 element距離左方或上層控件的位置，整型，單位像素。
// element.offsetWidth 指 element控件自身的寬度，整型，單位像素。
// element.offsetHeight 指 element控件自身的高度，整型，單位像素。
//  clientHeigh = height + 上下padding
//   clientWidth = width+左右padding

實(shí)現(xiàn)完整代碼

<template>
  <div class="to-do-list" ref="parentBox">
    <div class="search-title">
      <h2 class="add-bold left-box" >
        <a-icon type="unordered-list"  />元素拖動(dòng)
      </h2>
    </div>
    <a-button ref="moveBtn"  class="move-btn" type="primary"
      >拖動(dòng)按鈕</a-button
    >
  </div>
</template>

<script lang="ts">
import { Component, Emit, Inject, Prop, Ref, Vue, Watch } from 'vue-property-decorator';

@Component({
  components: {},
})
export default class BriberyInformation extends Vue {
  @Ref() readonly moveBtn;
  @Ref() readonly parentBox;

  btnDown() {
    let box = this.moveBtn.$el; //獲取button的盒子dom元素
    let parentBox = this.parentBox; //獲取button父級(jí)元素的dom元素
    let parentH = parentBox.clientHeight; //獲取button父級(jí)元素的height
    let parentW = parentBox.clientWidth; //獲取button父級(jí)元素的width

    let x, y;
    let moveX, moveY; //移動(dòng)距離
    let maxX, maxY; //最大移動(dòng)距離
    let isDrop = false;

    box.onmousedown = e => {
      x = e.clientX - box.offsetLeft; // e.clientX鼠標(biāo)相對(duì)于瀏覽器左上角x軸的坐標(biāo)-button上層控件的位置
      y = e.clientY - box.offsetTop;
      isDrop = true;
    };
    document.onmousemove = e => {
      if (isDrop) {
        e.preventDefault();
        moveX = e.clientX - x; //得到距離左邊移動(dòng)距離
        moveY = e.clientY - y; //得到距離上邊移動(dòng)距離

        //可移動(dòng)最大距離
        maxX = parentW - box.offsetWidth;
        maxY = parentH - box.offsetHeight;

        //移動(dòng)的有效距離計(jì)算
        //console.log(Math.min(-1, 4, 6, 12));//輸出-1-----多個(gè)參數(shù)，返回最小值
        moveX = Math.min(maxX, Math.max(0, moveX));

        moveY = Math.min(maxY, Math.max(0, moveY));
        box.style.left = moveX + 'px';
        box.style.top = moveY + 'px';
      } else {
        return;
      }
    };
    document.onmouseup = e => {
      e.preventDefault();
      isDrop = false;
    };
  }

  mounted() {
    this.btnDown();
  }
}
</script>
<style scoped lang="less">
.to-do-list {
  position: relative;
  min-height: 600px;
  max-height: 600px;
  width: 600px;
  overflow: hidden;
  border: 2px solid black;
  .move-btn {
    position: absolute;
  }
}
</style>

感謝各位的閱讀，以上就是“怎么用vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！