vue实现图片拖拽功能

本文实例为大家分享了vue实现图片拖拽功能的具体代码，供大家参考，具体内容如下

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

2、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.oncJQBimousemove = (e) => {            // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置            let left = e.clientX - disX;            let top = e.clientY - disY;            oDiv.style.left = left + 'px';            oDiv.style.top = top + 'px';     cJQBi     };          document.onmouseup = () => {            document.onmousemove = null;            document.onmouseup = null;          }        }      }    }    }

3、使用方法：

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也cJQBi希望大家多多支持我们。