vue 盒子拖拽

最新推荐文章于 2023-12-06 16:01:30 发布

阿龙-0426

最新推荐文章于 2023-12-06 16:01:30 发布

阅读量628

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_31122143/article/details/126390125

版权

<template>
  <div class="home">
    <!-- 写一个方块样式 -->
    <!-- ref="" 配合 $refs 使用可以获取到 DOM 元素 -->
    <!-- mousedown 鼠标点击事件 -->
    <span ref="modal" @mousedown="drag($event)"></span>
  </div>
</template>

<script>
export default {
  //数据
  data() {
    return {
      pagex: "", // 盒子距浏览器左侧的距离
      pagey: "", // 盒子距浏览器顶部的距离
    };
  },
  //创建前
  created() {
    // 这一步是为了刷新页面后盒子还在原位，没有这个需求可以不用写
    if (localStorage.getItem("pagex")) {
      this.pagex = JSON.parse(localStorage.getItem("pagex"));
      this.pagey = JSON.parse(localStorage.getItem("pagey"));
    }
  },
  // 获取DOM
  mounted() {
    // 这一步是为了刷新页面后盒子还在原位，没有这个需求可以不用写
    let modal = this.$refs.modal;
    modal.style.left = this.pagex;
    modal.style.top = this.pagey;
  },
  //方法
  methods: {
    drag(e)