在这篇文章中，我们来学习一下“基于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框架怎么实现图片拖拽效果，方法是什么”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 深入理解JS树结构深度优先算法，有哪些知识点

  什么是树在现实生活中，相信每个人对树都很熟悉，不管是柳树、杨树还是桃树，可以说树在我们生活中随处可见；在计算机世界，树是一种分层结构的抽象模型，如下图所示：树结构的应用有很多

• JS递归算法具体如何应用，递归是如何工作的

  递归是算法中一个重要的解法,因此,有必要单拎出来讲讲,所以下面这篇文章主要给大家介绍了关于JavaScript递归经典案例题的相关资料,需要的朋友可以参考下

• 用swiper制作卡片轮播效果的代码是什么

  这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript的保留字是什么意思，包括哪些？

  JavaScript的保留字是什么意思，有哪些？javascript的保留字有：abstract、double、goto、native、static等等，很多新手不清楚JavaScript的保留字是什么，对此本文就给大家来简单的介绍一下，大家在使用JavaScript时，对于JavaScript的保留字要注意。

• jQuery如何制作图片选中高亮显示效果，方法是什么

  这篇文章主要为大家详细介绍了jQuery实现图片高亮显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下