vue怎么实现图片拖拽功能

本篇内容介绍了“Vue怎么实现图片拖拽功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

主要涉及到的元素知识，示意图：

js代码部分：

directives: {    drag: {      // 指令的定义      bind: function(el) {        // 获取当前元素        let oDiv = 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;          }        }      }    }    }

使用方法：

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

样式部分（一定要设置position为absolute）：

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

“vue怎么实现图片拖拽功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！