Fix drag-and-drop functionality in team builder

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

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

webserver.py

@@ -2176,11 +2176,16 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             background: var(--bg-tertiary);
             border-radius: 12px;
             padding: 15px;
-            cursor: move;
+            cursor: grab;
             transition: all 0.3s ease;
             border: 2px solid transparent;
             position: relative;
             box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+            user-select: none;
+        }}
+        
+        .pet-card:active {{
+            cursor: grabbing;
         }}
         
         .pet-card:hover {{
@@ -2498,24 +2503,35 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             currentTeam[petId] = isActive;
         }});
         
-        // Enhanced drag and drop functionality
+        // Enhanced drag and drop functionality - Fixed version
-        document.querySelectorAll('.pet-card').forEach(card => {{
+        function initializeDragAndDrop() {{
-            card.addEventListener('dragstart', handleDragStart);
+            // Attach events to pet cards
-            card.addEventListener('dragend', handleDragEnd);
+            document.querySelectorAll('.pet-card').forEach(card => {{
-        }});
+                card.draggable = true;
-        
+                card.addEventListener('dragstart', handleDragStart);
-        document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{
+                card.addEventListener('dragend', handleDragEnd);
-            zone.addEventListener('dragover', handleDragOver);
+            }});
-            zone.addEventListener('drop', handleDrop);
+            
-            zone.addEventListener('dragenter', handleDragEnter);
+            // Attach events to drop zones and containers
-            zone.addEventListener('dragleave', handleDragLeave);
+            const dropTargets = ['#active-container', '#storage-container', '#active-drop', '#storage-drop'];
-        }});
+            dropTargets.forEach(selector => {{
+                const element = document.querySelector(selector);
+                if (element) {{
+                    element.addEventListener('dragover', handleDragOver);
+                    element.addEventListener('drop', handleDrop);
+                    element.addEventListener('dragenter', handleDragEnter);
+                    element.addEventListener('dragleave', handleDragLeave);
+                }}
+            }});
+        }}
         
         function handleDragStart(e) {{
             draggedElement = this;
             this.classList.add('dragging');
             e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/html', this.outerHTML);
+            e.dataTransfer.setData('text/plain', this.dataset.petId);
+            
+            console.log('Drag started for pet:', this.dataset.petId);
             
             // Add visual feedback
             setTimeout(() => {{
@@ -2531,6 +2547,8 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{
                 zone.classList.remove('drag-over');
             }});
+            
+            console.log('Drag ended');
         }}
         
         function handleDragOver(e) {{
@@ -2540,41 +2558,55 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         
         function handleDragEnter(e) {{
             e.preventDefault();
-            if (e.target.classList.contains('drop-zone') || e.target.classList.contains('pets-container')) {{
+            const target = e.currentTarget;
-                e.target.classList.add('drag-over');
+            if (target.classList.contains('drop-zone') || target.classList.contains('pets-container')) {{
+                target.classList.add('drag-over');
             }}
         }}
         
         function handleDragLeave(e) {{
-            if (e.target.classList.contains('drop-zone') || e.target.classList.contains('pets-container')) {{
+            const target = e.currentTarget;
-                // Only remove if we're actually leaving the element
+            // Only remove if we're leaving the current target and not entering a child
-                if (!e.target.contains(e.relatedTarget)) {{
+            if (!target.contains(e.relatedTarget)) {{
-                    e.target.classList.remove('drag-over');
+                target.classList.remove('drag-over');
-                }}
             }}
         }}
         
         function handleDrop(e) {{
             e.preventDefault();
-            if (!draggedElement) return;
+            console.log('Drop event triggered');
             
-            const petId = draggedElement.dataset.petId;
+            if (!draggedElement) {{
-            let newActiveStatus;
+                console.log('No dragged element');
-            let targetContainer;
+                return;
-            
-            // Determine target based on drop zone or container
-            if (e.target.id === 'active-drop' || e.target.closest('#active-container')) {{
-                newActiveStatus = true;
-                targetContainer = document.getElementById('active-container');
-                moveToActive(draggedElement);
-            }} else if (e.target.id === 'storage-drop' || e.target.closest('#storage-container')) {{
-                newActiveStatus = false;
-                targetContainer = document.getElementById('storage-container');
-                moveToStorage(draggedElement);
             }}
             
-            if (newActiveStatus !== undefined && newActiveStatus !== currentTeam[petId]) {{
+            const petId = draggedElement.dataset.petId;
+            const currentIsActive = currentTeam[petId];
+            let newActiveStatus = null;
+            
+            // Determine target section based on the drop target
+            const dropTarget = e.currentTarget;
+            console.log('Drop target:', dropTarget.id);
+            
+            if (dropTarget.id === 'active-container' || dropTarget.id === 'active-drop') {{
+                newActiveStatus = true;
+                console.log('Moving to active team');
+            }} else if (dropTarget.id === 'storage-container' || dropTarget.id === 'storage-drop') {{
+                newActiveStatus = false;
+                console.log('Moving to storage');
+            }}
+            
+            // Only move if there's a change
+            if (newActiveStatus !== null && newActiveStatus !== currentIsActive) {{
                 currentTeam[petId] = newActiveStatus;
+                
+                if (newActiveStatus) {{
+                    moveToActive(draggedElement);
+                }} else {{
+                    moveToStorage(draggedElement);
+                }}
+                
                 updateSaveButton();
                 updateDropZoneVisibility();
                 
@@ -2583,6 +2615,8 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 setTimeout(() => {{
                     draggedElement.style.transform = '';
                 }}, 200);
+                
+                console.log('Pet moved successfully');
             }}
             
             // Clear all drag states
@@ -2726,6 +2760,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         }});
         
         // Initialize interface
+        initializeDragAndDrop();
         updateSaveButton();
         updateDropZoneVisibility();