UPDATE: VERSION-20260313
This commit is contained in:
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user