vue怎么實(shí)現(xiàn)圖片拖拽功能

本篇內(nèi)容介紹了“vue怎么實(shí)現(xiàn)圖片拖拽功能”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、主要涉及到的元素知識(shí)，示意圖：

2、js代碼部分：

directives: {
    drag: {
      // 指令的定義
      bind: function(el) {
        // 獲取當(dāng)前元素
        let oDiv = el;
        oDiv.onmousedown = (e) => {
          // 算出鼠標(biāo)相對(duì)元素的位置
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = (e) => {
            // 用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置，得到元素的位置
            let left = e.clientX - disX;
            let top = e.clientY - disY;

            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
    }
    }

3、使用方法：

<div class="card" v-drag id="card">
<img src="../assets/logo.png" >
</div>

4、樣式部分（一定要設(shè)置position為absolute）：

.card {
  position: absolute;
  float: left;
  width: 200px;
  height: 200px;

}

“vue怎么實(shí)現(xiàn)圖片拖拽功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！