vue实现图片拖拽功能

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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.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" >
</div>

4、样式部分(一定要设置posITion为absolute):

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

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的vue实现图片拖拽功能全部内容,希望文章能够帮你解决vue实现图片拖拽功能所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:vue