vue3实现推拽功能

有两种实现方式

利用 draggable 拖拽事件

拖放流程：选中 —> 拖动 —> 释放

<template>
    <div class="container">
        <div class="show">
            <h2>拖动你喜欢的图案到衣服上</h2>
            <div class="tshirt">
                <img src="../assets/T恤.jpg" alt="">
                <div ref="empty" class="empty" @drop="listDrop"></div>
            </div>
        </div>
        <div class="list">
            <div draggable="true" id="lis"></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
let empty = ref()

// 拖拽过程中，在被拖拉的节点上持续触发
document.addEventListener('drag', (e) => {
    e.target.style.border = '4px dashed'
    empty.value.style.border = '5px dashed blue'
})
// 开始拖拽时触发
document.addEventListener('dragstart', (e) => {

})
// 拖拽结束时触发
document.addEventListener('dragend', (e) => {
    e.target.style.border = 'none'
    empty.value.style.border = 'none'
})
// 拖拽操作离开当前节点范围时，在当前节点触发
document.addEventListener('dragleave', (e) => [

])
// 拖拽进入当前节点时，在当前节点上触发一次
document.addEventListener('dragenter', (e) => {
    if (empty.value.firstChild) {
        empty.value.removeChild(empty.value.firstChild)
    }
})
// 当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时触发
document.addEventListener('dragover', (e) => {
    // 取消默认行为
    e.preventDefault()
})
// 被拖拽的节点，释放到目标节点时，在目标节点上触发
document.addEventListener('drop', (e) => {
    // 取消默认行为
    e.preventDefault()
    e.target.appendChild(document.getElementById('lis'))
})



</script>

<style scoped>
.container {
    display: flex;
    text-align: center;

}

.show {
    box-sizing: content-box;
    width: 400px;
    height: 450px;
    margin-right: 20px;
    border: 1px solid;

}

.tshirt {
    position: relative;
}

.tshirt img {
    display: flex;
    width: 400px;
    height: 350px;
}

.empty {
    position: absolute;
    left: 155px;
    top: 140px;
    width: 80px;
    height: 80px;
    border: 1px solid;
}

#lis {
    width: 80px;
    height: 80px;
    background: red;
}
</style>

利用鼠标坐标

/* 拖拽相关代码 */
// 鼠标按下点和推拽元素的距离
let distanceX = 0;
let distanceY = 0;
let mainboard = ref()
let floatboard = ref()
function floatMouseDown(e) {
    /* pageX 是鼠标点距离屏幕X轴的距离
    offsetLeft 是自身元素左边距和上一个定位元素的距离 */
    distanceX = e.pageX - mainboard.value.offsetLeft - floatboard.value.offsetLeft;
    distanceY = e.pageY - mainboard.value.offsetTop - floatboard.value.offsetTop;
    function move(e) {
        left.value = e.pageX - mainboard.value.offsetLeft - distanceX;
        top.value = e.pageY - mainboard.value.offsetTop - distanceY
    }
    document.addEventListener('mousemove', move, false)
    document.addEventListener('mouseup', () => {
        // 移除监听事件
        document.removeEventListener('mousemove', move)
    }, false)
}

‍