vue 拖拽小图标获取坐标位置

最新推荐文章于 2024-07-05 10:59:37 发布

小江是小可爱

最新推荐文章于 2024-07-05 10:59:37 发布

阅读量2.4k

点赞数 2

分类专栏： vue新知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_45235942/article/details/110083191

版权

这篇博客介绍了一个在Vue中实现小图标拖拽功能的方法，并详细解释如何获取图标在固定区域内的实时坐标。通过结合自定义指令v-drag，可以在拖动结束后获得图标相对于容器的左上角距离，以便于进行后续操作。注意在指令函数中，由于无法直接访问到`this`，需要在`data`中预定义变量来保存上下文。

摘要由CSDN通过智能技术生成

遇到一个功能，在固定的一张图或者说一个框内有一个小图标可以拖拽，并且能拿到他当前位置的坐标，如下图
在这里插入图片描述
二维码小图标代码如下

<!-- 拖拽小图标 v-drag：拖拽效果，配置当前元素position: absolute;并配置vue的directives生命周期 -->
  <img class="qr_code" :src="src" alt="" v-drag="isDrag" title="模拟二维码" />
 <!-- data里面写上数据  isDrag: true, -->

结合拖拽指令使用，与mounted，methods为同级关系

// 拖拽指令
  directives: {
   
    //注册指令
    drag (el, binding, vnode) {
   
      let dragBox = el; //获取当前元素
      // this获取不到，所以要通过传参的方式做出来，是这个指令自带的参数
      var _self = vnode.context;
      // 当前元素位置
      if (_self.editInfo.coordinatesX != "") {
   
        dragBox.style.left =