vue中使用vue-draggable-resizable，拖拽之后，使元素位置恢复默认状态

有蝉

已于 2022-03-13 14:45:56 修改

阅读量5.7k

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2021-08-30 10:34:12 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/119990402

版权

vue 专栏收录该内容

62 篇文章 3 订阅

订阅专栏

元素拖拽之后，位置会改变。如何手动使其位置恢复原状呢？

vue-draggable-resizable的源码中将咱们传入的x，y做了一个值的转换，转换为了left，top。

源码中style属性加到了computed里面，所以left和top改变之后，元素的位置就会改变

所以我们初始化的时候，不仅需要修改x和y的值，还需要手动修改vue-draggable-resizable的left和top的值


<template>

  <div>
        <el-button @click="rePosition">恢复默认位置</el-button>
        <vue-draggable-resizable
            ref="$dragPlug"
            :w="150"
            :h="150"
            :x="canvasX"
            :y="canvasY"
            :min-width="50"
            :min-height="50"
            :grid="[10, 10]"
          >
           <div style="width:100px;height:100px;background:#ddd">
                呵呵呵   
            </div>
          </vue-draggable-resizable>
    </div>
    
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
  components: {
    VueDraggableResizable,
   
  },
  data() {
    return {
      canvasX: 0,
      canvasY: 50
    };
  },
 
  mounted() {},
  
  methods: {
    rePosition() {
        this.canvasX = 0;
        this.canvasY = 50;
        this.$refs.$dragPlug.left = this.canvasX;
        this.$refs.$dragPlug.top = this.canvasY;
        //this.$refs.$dragPlug.$el.style.transform = `translate(${this.canvasX}px, 
  ${this.canvasY}px)`;
    }
  }
};
</script>

<style lang='scss'>

</style>