Initial commit: 传感器实验课件系统

- 基于 React 19 + Vite 7 + Tailwind CSS 4
- 实现拖拽排序功能 (@dnd-kit)
- 5个传感器实验项目展示
- 响应式设计和现代化 UI
- 修复拖拽释放到空白区域时的潜在 bug

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/DraggableItem.jsx

@@ -0,0 +1,39 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+
+export function DraggableItem({ id, children }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`bg-white border border-gray-200 rounded-lg p-4 mb-3 flex items-center gap-3 shadow-sm hover:shadow-md transition-shadow ${
+        isDragging ? 'cursor-grabbing' : 'cursor-grab'
+      }`}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        className="text-gray-400 hover:text-gray-600 transition-colors"
+      >
+        <GripVertical size={20} />
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+}