链接深度画布

src/components/Canvas/DepthCanvas/components/layer-panel/layer-item.vue

@@ -3,8 +3,8 @@
 		<div class="drag"><svg-icon name="dc-drag" size="18" /></div>
 		<div class="thumb"></div>
 		<div class="name">
-			<div @dblclick="editName = true" v-if="!editName">图层 1</div>
-			<input type="text" value="图层 1" v-else @blur="editName = false" />
+			<div @dblclick="editName = true" v-if="!editName">{{ layer.name }}</div>
+			<input type="text" v-model="layer.name" v-else @blur="editName = false" />
 		</div>
 		<div class="icons">
 			<span><svg-icon name="dc-show" size="15" /></span>
@@ -16,7 +16,12 @@
 
 <script setup lang="ts">
 	import { ref, inject, computed } from 'vue'
-	const props = defineProps({})
+	const props = defineProps({
+		layer: {
+			type: Object,
+			default: () => ({})
+		}
+	})
 	const editName = ref(false)
 </script>
 
@@ -34,8 +39,18 @@
 		&:last-child {
 			border-bottom: none;
 		}
-		&:hover,
-		&.active {
+		&:not([draging='true']) {
+			&:hover,
+			&.active {
+				background-color: #ededed;
+			}
+		}
+		&.drag {
+			opacity: 0;
+		}
+		&.ghost,
+		&.chosen {
+			box-shadow: inset 0 0 5px #aaa;
 			background-color: #ededed;
 		}
 		> .drag {

src/components/Canvas/DepthCanvas/components/layer-panel/layer-list.vue

@@ -10,18 +10,62 @@
 			</div>
 		</div>
 		<div class="content">
-			<layer-item />
-			<layer-item />
-			<layer-item />
+			<VueDraggable
+				:model-value="sortableRootLayers"
+				@start="handleDragStart"
+				@end="handleDragEnd"
+				class="sortable-layers"
+				:data-container-type="'root'"
+				:data-parent-id="null"
+				:animation="250"
+				:disabled="false"
+				handle=".drag"
+				ghost-class="ghost"
+				chosen-class="chosen"
+				drag-class="drag"
+				:group="{
+					name: 'groupName',
+					pull: true,
+					put: true
+				}"
+				:swap-threshold="0.5"
+				:empty-insert-threshold="5"
+				:force-fallback="false"
+				:fallback-tolerance="3"
+				:scroll-sensitivity="100"
+				:scroll-speed="10"
+			>
+				<layer-item
+					v-for="layer in sortableRootLayers"
+					:key="layer.id"
+					:layer="layer"
+					:draging="draging"
+				/>
+			</VueDraggable>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
+	import { VueDraggable } from 'vue-draggable-plus'
 	import { ref, inject, computed } from 'vue'
 	import layerItem from './layer-item.vue'
-	const props = defineProps({})
-	const emit = defineEmits(['export', 'import'])
+	const draging = ref(false)
+	const sortableRootLayers = ref([
+		{ id: 1, name: 'layer1' },
+		{ id: 2, name: 'layer2' },
+		{ id: 3, name: 'layer3' }
+	])
+
+	const handleDragStart = () => {
+		draging.value = true
+	}
+	const handleDragEnd = (event) => {
+		draging.value = false
+		const { from, to, oldIndex, newIndex, item } = event
+		console.log('🔄 拖拽结束事件:', event)
+		sortableRootLayers.value.splice(newIndex, 0, sortableRootLayers.value.splice(oldIndex, 1)[0])
+	}
 </script>
 
 <style lang="less" scoped>