本文例項為大家分享了實現圖片拖拽功能的具體程式碼，供大家參考，具體內容如下

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

2、程式碼部分：

directives: {
    drag: {
      // 指令的定義
      bind: function(el) {
        // 獲取當前元素
        let onSRkPADiv http://www.cppcns.com= el;
        oDiv.onmousedown = (e) => {
          // 算出滑鼠相對元素的位置
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = (e) => {
            // 用滑鼠的位置減去滑鼠相對元素的位置，得到元素的位置
            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" >
</http://www.cppcns.com
 
div>

4、樣式部分（一定要設定position為absolute）：

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

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。