vuejs 原生JS 拖拽事件案例

原生JS or Vue 事件案例合集（详细）

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
Section 1 单个或多个鼠标拖拽事件的理解

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

虽然 但是 可能 也许 大概 现在我们都会使用第三方库element antdesign vant 等组件库是吧。但是呢，你去面试 或者说 产品提了个什么你没听过的需求，这个时候你不知道你能不能实现，或者说实现的难易度无法评估，无法准确的评估计划时间。这个时候，欸欸欸，你就该打开CSDN 打开你的关注 找到me，翻阅一下我的案例合集了！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、拖拽的理解及我们需要用什么去实现的思路？

1. 拖拽 拖拽 拖拽那我们也应该要选中那一个元素进行拖是吧 Js事件里鼠标按下的事件 恰恰能达到我们选中元素的需求 mousedown事件是在鼠标键点下的时候触发（包括左键和右键）。
2. 那么这个时候呢，我们拿到了我们需要拖动的元素，下一步就是让这个元素动起来，怎么动？或者说跟着什么动？Pc端当然是跟着鼠标动了 那我们就需要Js的另一个事件 mousemove 官方解释是鼠标在某个元素上时持续发生 也就是说鼠标只要在绑定的这个元素上 都会出现这个事件 所以我们可以通过这个事件持续的获取到鼠标的位置 从而实时的设置拖动元素的位置
3. 到这里其实我们已经看得到效果了，但是还是有一些地方需要完善，mousemove 因为这个事件会一直执行 但是一次拖动总要有拖动完成的时候 所以我们需要在鼠标抬起的时候取消对应的事件 mouseup松开任意一个鼠标按钮时发生

二、具体实现方式（全代码 和 效果图在最后）

1.js代码逻辑

    mousedown() {
      // 全文需要用到三个事件 mousedown 鼠标按下 onmousemove  鼠标移动 onmouseup  鼠标抬起
      // 拿到鼠标按下的元素 由于我案例只是单个所以 直接用的ref 如果是多个 你可以用动态的ref 或者在方法里传入事件event对象
      let sourceDom = this.$refs.boxRef;
      console.dir(sourceDom);
      // 改变元素位置 其原理还是改变它的定位值 所以我们需要设置dom元素的定位 （子绝父相）
      sourceDom.style.position = "absolute";
      // 记住一点 拖动元素 是你鼠标按下的这个元素 在这个页面（或父级）的鼠标位置进行移动 而不是 你需要拖动的元素在自己元素内跟随着着鼠标移动
      this.$refs.homeRef.onmousemove = (event) => {
        /**
         * pageX和pageY 鼠标到可视窗口左侧上侧距离 + 滚动条滚动距离(如果有滚动条)
         * clientWidth clientHeigh 的实际宽度是  width（height） + 左右（上下）的padding
         */
        // 因为我需要把鼠标指针 移动到元素的中间 所以需要除这个元素宽高的一半
        sourceDom.style.left = event.pageX - sourceDom.clientWidth / 2 + "px";
        sourceDom.style.top = event.pageY - sourceDom.clientHeight / 2 + "px";
      };
      // 当鼠标抬起时 我们需要清除在这个元素内的移动 和 抬起事件 否则会一直移动
      this.$refs.homeRef.onmouseup = () => {
        //这俩都要置为null
        this.$refs.homeRef.onmousemove = null;
        this.$refs.homeRef.onmouseup = null;
        return false;
      };
    },

2.全部代码

<template>
  <div class="home" ref="homeRef">
    <div @mousedown="mousedown" ref="boxRef"></div>
  </div>
</template>

<script>
export default {
  components: {},
  methods: {
    mousedown() {
      // 全文需要用到三个事件 mousedown 鼠标按下 onmousemove  鼠标移动 onmouseup  鼠标抬起
      // 拿到鼠标按下的元素 由于我案例只是单个所以 直接用的ref 如果是多个 你可以用动态的ref 或者在方法里传入事件event对象
      let sourceDom = this.$refs.boxRef;
      console.dir(sourceDom);
      // 改变元素位置 其原理还是改变它的定位值 所以我们需要设置dom元素的定位 （子绝父相）
      sourceDom.style.position = "absolute";
      // 记住一点 拖动元素 是你鼠标按下的这个元素 在这个页面（或父级）的鼠标位置进行移动 而不是 你需要拖动的元素在自己元素内跟随着着鼠标移动
      this.$refs.homeRef.onmousemove = (event) => {
        /**
         * pageX和pageY 鼠标到可视窗口左侧上侧距离 + 滚动条滚动距离(如果有滚动条)
         * clientWidth clientHeigh 的实际宽度是  width（height） + 左右（上下）的padding
         */
        // 因为我需要把鼠标指针 移动到元素的中间 所以需要除这个元素宽高的一半
        sourceDom.style.left = event.pageX - sourceDom.clientWidth / 2 + "px";
        sourceDom.style.top = event.pageY - sourceDom.clientHeight / 2 + "px";
      };
      // 当鼠标抬起时 我们需要清除在这个元素内的移动 和 抬起事件 否则会一直移动
      this.$refs.homeRef.onmouseup = () => {
        //这俩都要置为null
        this.$refs.homeRef.onmousemove = null;
        this.$refs.homeRef.onmouseup = null;
        return false;
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  div {
    border: 1px solid pink;
    width: 200px;
    height: 200px;
  }
}
</style>

3.效果预览

73d3d40e-cd5d-4297-9341-8c788fb54776

总结

看完了？学到了？赞呢？评论呢？走起来呀！！！