vue3 做个点击拖拽的的按钮

好色的菜狗 / 2024-10-16 / 原文

// 视图层
<div class="regularAI" ref="draggableDiv" :style="{ top: `${position.y}px`, left: `${position.x}px` }">
	<span @mousedown="startDrag">{{ isDragging ? '拖拽中' : '点击拖拽' }}</span>
</div>

// js代码
<script setup>
    import { ref } from 'vue'
    const draggableDiv = ref(null)
    const position = ref({ x: '99%', y: '99%' })
    const isDragging = ref(false)

    const startDrag = (e) => {
        isDragging.value = true
        const startX = e.clientX - draggableDiv.value.getBoundingClientRect().left
        const startY = e.clientY - draggableDiv.value.getBoundingClientRect().top

        const onMouseMove = (e) => {
            if (!isDragging.value) return
            position.value.x = e.clientX - startX
            position.value.y = e.clientY - startY
        }

        const onMouseUp = () => {
            isDragging.value = false
            window.removeEventListener('mousemove', onMouseMove)
            window.removeEventListener('mouseup', onMouseUp)
        }

        window.addEventListener('mousemove', onMouseMove)
        window.addEventListener('mouseup', onMouseUp)
    }
</script>

样式

	.regularAI {
		position: fixed;
		right: 1%;
		bottom: 1%;
		z-index: 999;
		width: 60px;
		span {
			display: block;
			text-align: center;
			cursor: pointer;
		}
	}