UPDATE: VERSION-20260313

This commit is contained in:
libertyspy
2026-03-13 17:05:08 +08:00
parent a2f2cbb185
commit 7b578f5d63
7 changed files with 96 additions and 54 deletions

View File

@@ -13,7 +13,7 @@
:data-type="nm.type"
class="ks-model-drag-item"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, nm)"
@dragstart="handleDragStart($event, nm, 'control')"
>
<img :alt="nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
<span class="desc">{{ nm.name }}</span>
@@ -34,7 +34,7 @@
:data-type="nm.type"
class="ks-model-drag-item"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, nm)"
@dragstart="handleDragStart($event, nm, 'condition')"
>
<img :alt="nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
<span class="desc">{{ nm.name }}</span>
@@ -55,7 +55,7 @@
:data-type="nm.type"
class="ks-model-drag-item"
@dragend="handleDragEnd"
@dragstart="handleDragStart($event, nm)"
@dragstart="handleDragStart($event, nm, 'action')"
>
<img :alt="nm.name ?? ''" class="icon" src="@/assets/icons/model-4.svg" />
<span class="desc">{{ nm.name }}</span>
@@ -71,7 +71,7 @@
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import type { NodeTemplate } from './types';
import type { NodeDragTemplate, NodeTemplate } from './types';
import { findNodeTemplates } from './api';
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
@@ -82,7 +82,7 @@ export default defineComponent({
const activeKey = ref<number>(1);
const templateData = ref<NodeTemplate[]>([]);
const isDraggingOver = ref<boolean>(false);
const draggedNodeData = ref<NodeTemplate | null>(null);
const draggedNodeData = ref<NodeDragTemplate | null>(null);
// 控制节点
const controlTemplates = ref<NodeTemplate[]>([]);
// 条件节点
@@ -111,15 +111,16 @@ export default defineComponent({
});
};
const handleDragStart = (e: DragEvent, nm: NodeTemplate) => {
draggedNodeData.value = nm;
const handleDragStart = (e: DragEvent, nm: NodeTemplate, group: String) => {
let dragNode: NodeDragTemplate = { ...nm, group: group };
draggedNodeData.value = dragNode as NodeDragTemplate;
if (e.dataTransfer) {
e.dataTransfer.setData('text/plain', JSON.stringify(draggedNodeData.value));
e.dataTransfer.effectAllowed = 'copyMove';
const dragPreview = document.createElement('div');
dragPreview.textContent = draggedNodeData.value.name || '';
dragPreview.textContent = dragNode.name || '';
dragPreview.style.cssText = `
position: absolute;
top: -1000px;
@@ -132,8 +133,8 @@ export default defineComponent({
`;
document.body.appendChild(dragPreview);
e.dataTransfer.setDragImage(dragPreview, dragPreview.offsetWidth / 2, dragPreview.offsetHeight / 2);
emit('drag-item-start', nm, isDraggingOver.value, e);
console.log('开始拖动:', nm);
emit('drag-item-start', dragNode, group, isDraggingOver.value, e);
console.log('开始拖动:', dragNode);
setTimeout(() => document.body.removeChild(dragPreview), 0);
}
};