47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
|
<template>
|
|||
|
|
<div
|
|||
|
|
class="icon-container"
|
|||
|
|
:style="`grid-column: ${icon.col}/${icon.col + 1};grid-row: ${icon.row}/${icon.row + 1};`"
|
|||
|
|
draggable="true"
|
|||
|
|
@dragstart="onDragStart"
|
|||
|
|
@dragend="onDragEnd"
|
|||
|
|
>
|
|||
|
|
{{ icon.name }}
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
|
|||
|
|
import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'
|
|||
|
|
|
|||
|
|
const { icon, gridTemplate } = defineProps<{ icon: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
|
|||
|
|
|
|||
|
|
const onDragStart = (e: DragEvent) => {}
|
|||
|
|
|
|||
|
|
const onDragEnd = (e: DragEvent) => {
|
|||
|
|
const el = e.target as HTMLElement | null
|
|||
|
|
if (!el) return
|
|||
|
|
// 获取容器边界
|
|||
|
|
const rect = el.parentElement!.getBoundingClientRect()
|
|||
|
|
|
|||
|
|
// 鼠标相对容器左上角坐标
|
|||
|
|
const mouseX = e.clientX - rect.left
|
|||
|
|
const mouseY = e.clientY - rect.top
|
|||
|
|
|
|||
|
|
// 计算鼠标所在单元格坐标（向上取整，从1开始）
|
|||
|
|
const gridX = Math.ceil(mouseX / gridTemplate.cellRealWidth)
|
|||
|
|
const gridY = Math.ceil(mouseY / gridTemplate.cellRealHeight)
|
|||
|
|
console.log(gridX, gridY)
|
|||
|
|
icon.col = gridX
|
|||
|
|
icon.row = gridY
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.icon-container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
@apply flex flex-col items-center justify-center rounded bg-gray-200;
|
|||
|
|
}
|
|||
|
|
</style>
|