vue3+ts写一个可以拖动的div块

intrwins

已于 2022-06-18 17:28:53 修改

阅读量373

点赞数 1

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

于 2022-06-18 17:11:14 首次发布

本文链接：https://blog.csdn.net/intrwins/article/details/125349326

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试_关耳佳的博客-CSDN博客_clientx

<template>
    <div v-move class="box">
        <div class="header"></div>
        <div class="content">内容</div>
    </div>
</template>
<script setup lang="ts">
    import {Directive, DirectiveBinding} from 'vue'
    type Dir = {
        background: string
    }
    const vMove: Directive<any, void> = (el: HTMLElement, bingding: DirectiveBinding) => {
        let moveElement: HTMLDivElement = el.firstElementChild as HTMLDivElement
        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="less">
    .box {
        position: fixed;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        transform: translate(-50%, -50%);
        .header {
            height: 40px;
            background: black;
            cursor: move;
        }
        .content{padding: 10px;}
    }
</style>