vue3+ts 指令拖拽案例

最新推荐文章于 2024-03-04 09:23:24 发布

你的美，让我痴迷

最新推荐文章于 2024-03-04 09:23:24 发布

阅读量140

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45932157/article/details/134658440

版权

文章介绍了如何使用Vue的自定义指令(Directive)实现一个可拖动的元素，包括鼠标按下事件的监听、鼠标移动时元素位置的更新以及鼠标抬起时的事件移除。

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

<template>
  <div class="box" v-move>
    <div class="header"></div>
    <div>内容</div>
  </div>
</template>

<script setup lang="ts">
import { ref, Directive, DirectiveBinding } from "vue";
const vMove: Directive<any, void> = (el: HTMLElement, bingding: DirectiveBinding) => {
  let moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement;
  console.log(moveElement);
  const mouseDown = (e: MouseEvent) => {
    let X = e.clientX - el.offsetLeft;
    let Y = e.clientY - el.offsetTop;

    const move = (e: MouseEvent) => {
      console.log(e);
      el.style.left = e.clientX - X + "px";
      el.style.top = e.clientY - Y + "px";
    };
    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move);
    });
  };
  moveElement.addEventListener("mousedown", mouseDown);
};
</script>

<style lang="scss">
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 3px solid black;
  .header {
    height: 20px;
    background: black;
  }
}
</style>