| | |
| | |
|
| | | //点击小片
|
| | | const handleRectClick = (layoutIndex, rectIndex) => {
|
| | | if (dragging.value) {
|
| | | return;
|
| | | }
|
| | |
|
| | | focusIndex.value = { layoutIndex, rectIndex };
|
| | | emit('rectClicked', layoutIndex, rectIndex);
|
| | | };
|
| | |
| | | const glassDetail = layout.glassDetails[rectIndex];
|
| | | if (glassDetail.isRemain) return;
|
| | |
|
| | | dragging.value = true;
|
| | | dragRect.value = { layoutIndex, rectIndex };
|
| | | dragStartPos.value = {
|
| | | x: event.clientX,
|
| | |
| | |
|
| | | //小片鼠标移动事件
|
| | | const handleRectDragging = (event) => {
|
| | | if (!dragging.value || !dragRect.value) return;
|
| | | if (!dragRect.value) return;
|
| | |
|
| | | // 如果还没确认是拖拽,则先判断是否达到拖拽阈值(例如5像素)
|
| | | if (!dragging.value) {
|
| | | const deltaX = event.clientX - dragStartPos.value.x;
|
| | | const deltaY = event.clientY - dragStartPos.value.y;
|
| | | const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
| | |
|
| | | // 如果移动距离小于阈值,则认为是点击而非拖拽
|
| | | if (distance < 5) {
|
| | | return;
|
| | | }
|
| | |
|
| | | // 达到阈值,确认是拖拽操作
|
| | | dragging.value = true;
|
| | | }
|
| | |
|
| | | const layoutIndex = dragRect.value.layoutIndex;
|
| | | const rectIndex = dragRect.value.rectIndex;
|
| | |
| | |
|
| | | //小片鼠标松开事件
|
| | | const handleRectDragEnd = () => {
|
| | | dragging.value = false;
|
| | | dragRect.value = null;
|
| | | dragStartPos.value = { x: 0, y: 0 };
|
| | | if (dragRect.value) {
|
| | | const layoutIndex = dragRect.value.layoutIndex;
|
| | | const rectIndex = dragRect.value.rectIndex;
|