vuedraggable毫无疑问很好用,在搭建项目的时候,临时接到一个需求,画布中的元素需要进行缩放

然后问题就来了,在缩小到0.6左右的时候,vuedraggable的拖放失灵了

分析后发现是当画布 使用了zoom:0.6这样的样式,导致了鼠标的坐标出现了偏差

另外在实际操作中发现transform:scale(0.6);这样是没有问题的.但是会有一个问题,元素经过transform后,占位还是跟没有缩放那么大.

那么折中一下.在画布外面包一层元素”drag-wrap”,在画布transform后,同步计算并且赋值drag-wrap的宽高,并且加个overflow:hidden.解决问题

核心代码:

<template>
    <div :style="dragWrapStyle">
        <Draggable
            :style="dragStyle"
        ></Draggable>
    </div>
</template>

<script setup>
let dragWrapStyle = ref(null);
const dragStyle = computed(()=>{
    //这里是我获取画布的宽高与缩放属性,根据实际情况自己修改
    const {width, height, zoom} = canvas.value;
    // 一些逻辑代码,获取缩放大小,方法getZoomValue自己写
    const zoomValue = getZoomValue();
    dragWrapStyle.value= {
        width: (width * zoomValue) + 'px',
        height: (height * zoomValue) + 'px'
    }

    return{
        width: `${width}px`,
        height: `${height}px`,
        transform: "scale(" + zoomValue + ")",
        transformOrigin: "left top",
    }
})
</script>