v u e 3.0 写拖拽

樱颜

于 2022-04-26 16:30:34 发布

阅读量381

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_58160355/article/details/124431045

版权

本文介绍了如何在Vue 3.0中创建一个拖拽功能的项目。首先，通过Vue CLI新建了一个Vue 3.0项目，接着展示了实现拖拽效果的代码片段，并强调了配置路由的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先要下载vue3.0,

在views里新建vue项目

先看效果图：

然后复制粘贴下面的代码

<template>
  <div ref="drag" class="drag"></div>
</template>

<script lang="ts" setup>
import {ref,onMounted} from "vue"
const drag=ref(null)
const disX=ref<number>(0)
const disY=ref<number>(0)
const x=ref<number>(0)
const y=ref<number>(0)
onMounted(()=>{
    getdrag().onmousedown=Fndown
})
const getdrag=function(){
    return (drag.value as unknown as HTMLDivElement)
}

const Fndown  = function(ev:MouseEvent){
    
    disX.value = ev.clientX - x.value
    disY.value = ev.clientY - y.value
    document.onmousemove = fnmove
    document.onmouseup = fnup
}
const fnmove=function(ev:MouseEvent){