Rewrite drag-and-drop with comprehensive testing and debugging
🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
megaproxy
parent
d245454231
commit
bbaba99020
1 changed files with 171 additions and 115 deletions
276
webserver.py
276
webserver.py
|
|
@ -2495,6 +2495,34 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
|
|||
let currentTeam = {{}};
|
||||
let draggedElement = null;
|
||||
|
||||
// Test function to verify basic functionality
|
||||
function runDragDropTest() {{
|
||||
console.log('=== DRAG DROP TEST ===');
|
||||
const petCards = document.querySelectorAll('.pet-card');
|
||||
console.log('Pet cards found:', petCards.length);
|
||||
|
||||
petCards.forEach((card, index) => {{
|
||||
console.log(`Card ${{index}}: ID=${{card.dataset.petId}}, draggable=${{card.draggable}}, active=${{card.dataset.active}}`);
|
||||
}});
|
||||
|
||||
const containers = ['active-container', 'storage-container', 'active-drop', 'storage-drop'];
|
||||
containers.forEach(id => {{
|
||||
const element = document.getElementById(id);
|
||||
console.log(`Container ${{id}}: exists=${{!!element}}`);
|
||||
}});
|
||||
|
||||
// Test if drag events are working
|
||||
if (petCards.length > 0) {{
|
||||
const testCard = petCards[0];
|
||||
console.log('Testing drag events on first card...');
|
||||
|
||||
// Simulate drag start
|
||||
const dragEvent = new DragEvent('dragstart', {{ bubbles: true }});
|
||||
testCard.dispatchEvent(dragEvent);
|
||||
console.log('Drag event dispatched');
|
||||
}}
|
||||
}}
|
||||
|
||||
// Initialize team state
|
||||
document.querySelectorAll('.pet-card').forEach(card => {{
|
||||
const petId = card.dataset.petId;
|
||||
|
|
@ -2503,145 +2531,161 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
|
|||
currentTeam[petId] = isActive;
|
||||
}});
|
||||
|
||||
// Enhanced drag and drop functionality - Fixed version
|
||||
// Completely rewritten drag and drop - simpler approach
|
||||
function initializeDragAndDrop() {{
|
||||
// Attach events to pet cards
|
||||
console.log('Initializing drag and drop...');
|
||||
|
||||
// Make all pet cards draggable
|
||||
document.querySelectorAll('.pet-card').forEach(card => {{
|
||||
card.draggable = true;
|
||||
card.addEventListener('dragstart', handleDragStart);
|
||||
card.addEventListener('dragend', handleDragEnd);
|
||||
card.style.cursor = 'grab';
|
||||
|
||||
card.addEventListener('dragstart', function(e) {{
|
||||
console.log('DRAGSTART: Pet ID', this.dataset.petId);
|
||||
draggedElement = this;
|
||||
this.style.opacity = '0.5';
|
||||
this.style.cursor = 'grabbing';
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', this.dataset.petId);
|
||||
}});
|
||||
|
||||
card.addEventListener('dragend', function(e) {{
|
||||
console.log('DRAGEND');
|
||||
this.style.opacity = '';
|
||||
this.style.cursor = 'grab';
|
||||
draggedElement = null;
|
||||
// Clear all highlights
|
||||
document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
|
||||
}});
|
||||
}});
|
||||
|
||||
// Attach events to drop zones and containers
|
||||
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);
|
||||
// Set up drop zones
|
||||
const activeContainer = document.getElementById('active-container');
|
||||
const storageContainer = document.getElementById('storage-container');
|
||||
const activeDrop = document.getElementById('active-drop');
|
||||
const storageDrop = document.getElementById('storage-drop');
|
||||
|
||||
[activeContainer, activeDrop].forEach(zone => {{
|
||||
if (zone) {{
|
||||
zone.addEventListener('dragover', function(e) {{
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
}});
|
||||
|
||||
zone.addEventListener('dragenter', function(e) {{
|
||||
e.preventDefault();
|
||||
this.classList.add('drag-over');
|
||||
console.log('DRAGENTER: Active zone');
|
||||
}});
|
||||
|
||||
zone.addEventListener('dragleave', function(e) {{
|
||||
if (!this.contains(e.relatedTarget)) {{
|
||||
this.classList.remove('drag-over');
|
||||
}}
|
||||
}});
|
||||
|
||||
zone.addEventListener('drop', function(e) {{
|
||||
e.preventDefault();
|
||||
console.log('DROP: Active zone');
|
||||
this.classList.remove('drag-over');
|
||||
|
||||
if (draggedElement) {{
|
||||
const petId = draggedElement.dataset.petId;
|
||||
console.log('Moving pet', petId, 'to active');
|
||||
movePetToActive(petId);
|
||||
}}
|
||||
}});
|
||||
}}
|
||||
}});
|
||||
}}
|
||||
|
||||
function handleDragStart(e) {{
|
||||
draggedElement = this;
|
||||
this.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', this.dataset.petId);
|
||||
[storageContainer, storageDrop].forEach(zone => {{
|
||||
if (zone) {{
|
||||
zone.addEventListener('dragover', function(e) {{
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
}});
|
||||
|
||||
console.log('Drag started for pet:', this.dataset.petId);
|
||||
zone.addEventListener('dragenter', function(e) {{
|
||||
e.preventDefault();
|
||||
this.classList.add('drag-over');
|
||||
console.log('DRAGENTER: Storage zone');
|
||||
}});
|
||||
|
||||
// Add visual feedback
|
||||
setTimeout(() => {{
|
||||
this.style.opacity = '0.6';
|
||||
}}, 0);
|
||||
}}
|
||||
zone.addEventListener('dragleave', function(e) {{
|
||||
if (!this.contains(e.relatedTarget)) {{
|
||||
this.classList.remove('drag-over');
|
||||
}}
|
||||
}});
|
||||
|
||||
function handleDragEnd(e) {{
|
||||
this.classList.remove('dragging');
|
||||
this.style.opacity = '';
|
||||
zone.addEventListener('drop', function(e) {{
|
||||
e.preventDefault();
|
||||
console.log('DROP: Storage zone');
|
||||
this.classList.remove('drag-over');
|
||||
|
||||
// Clear all drag-over states
|
||||
document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{
|
||||
zone.classList.remove('drag-over');
|
||||
if (draggedElement) {{
|
||||
const petId = draggedElement.dataset.petId;
|
||||
console.log('Moving pet', petId, 'to storage');
|
||||
movePetToStorage(petId);
|
||||
}}
|
||||
}});
|
||||
}}
|
||||
}});
|
||||
|
||||
console.log('Drag ended');
|
||||
console.log('Drag and drop initialization complete');
|
||||
}}
|
||||
|
||||
function handleDragOver(e) {{
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
}}
|
||||
function movePetToActive(petId) {{
|
||||
const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
|
||||
if (!card) return;
|
||||
|
||||
function handleDragEnter(e) {{
|
||||
e.preventDefault();
|
||||
const target = e.currentTarget;
|
||||
if (target.classList.contains('drop-zone') || target.classList.contains('pets-container')) {{
|
||||
target.classList.add('drag-over');
|
||||
}}
|
||||
}}
|
||||
|
||||
function handleDragLeave(e) {{
|
||||
const target = e.currentTarget;
|
||||
// Only remove if we're leaving the current target and not entering a child
|
||||
if (!target.contains(e.relatedTarget)) {{
|
||||
target.classList.remove('drag-over');
|
||||
}}
|
||||
}}
|
||||
|
||||
function handleDrop(e) {{
|
||||
e.preventDefault();
|
||||
console.log('Drop event triggered');
|
||||
|
||||
if (!draggedElement) {{
|
||||
console.log('No dragged element');
|
||||
return;
|
||||
}}
|
||||
|
||||
const petId = draggedElement.dataset.petId;
|
||||
const activeContainer = document.getElementById('active-container');
|
||||
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 (!currentIsActive) {{
|
||||
// Update state
|
||||
currentTeam[petId] = true;
|
||||
|
||||
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);
|
||||
}}
|
||||
// Move DOM element
|
||||
card.classList.remove('storage');
|
||||
card.classList.add('active');
|
||||
card.dataset.active = 'true';
|
||||
card.querySelector('.status-badge').textContent = 'Active';
|
||||
activeContainer.appendChild(card);
|
||||
|
||||
// Update interface
|
||||
updateSaveButton();
|
||||
updateDropZoneVisibility();
|
||||
|
||||
// Visual feedback
|
||||
draggedElement.style.transform = 'scale(1.05)';
|
||||
setTimeout(() => {{
|
||||
draggedElement.style.transform = '';
|
||||
}}, 200);
|
||||
|
||||
console.log('Pet moved successfully');
|
||||
console.log('Pet moved to active successfully');
|
||||
}}
|
||||
|
||||
// Clear all drag states
|
||||
document.querySelectorAll('.drop-zone, .pets-container').forEach(zone => {{
|
||||
zone.classList.remove('drag-over');
|
||||
}});
|
||||
}}
|
||||
|
||||
function moveToActive(card) {{
|
||||
const container = document.getElementById('active-container');
|
||||
card.classList.remove('storage');
|
||||
card.classList.add('active');
|
||||
card.dataset.active = 'true';
|
||||
card.querySelector('.status-badge').textContent = 'Active';
|
||||
container.appendChild(card);
|
||||
function movePetToStorage(petId) {{
|
||||
const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
|
||||
if (!card) return;
|
||||
|
||||
const storageContainer = document.getElementById('storage-container');
|
||||
const currentIsActive = currentTeam[petId];
|
||||
|
||||
if (currentIsActive) {{
|
||||
// Update state
|
||||
currentTeam[petId] = false;
|
||||
|
||||
// Move DOM element
|
||||
card.classList.remove('active');
|
||||
card.classList.add('storage');
|
||||
card.dataset.active = 'false';
|
||||
card.querySelector('.status-badge').textContent = 'Storage';
|
||||
storageContainer.appendChild(card);
|
||||
|
||||
// Update interface
|
||||
updateSaveButton();
|
||||
updateDropZoneVisibility();
|
||||
|
||||
console.log('Pet moved to storage successfully');
|
||||
}}
|
||||
}}
|
||||
|
||||
function moveToStorage(card) {{
|
||||
const container = document.getElementById('storage-container');
|
||||
card.classList.remove('active');
|
||||
card.classList.add('storage');
|
||||
card.dataset.active = 'false';
|
||||
card.querySelector('.status-badge').textContent = 'Storage';
|
||||
container.appendChild(card);
|
||||
}}
|
||||
|
||||
function updateDropZoneVisibility() {{
|
||||
const activeContainer = document.getElementById('active-container');
|
||||
|
|
@ -2764,6 +2808,18 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
|
|||
updateSaveButton();
|
||||
updateDropZoneVisibility();
|
||||
|
||||
// Run test to verify everything is working
|
||||
setTimeout(() => {{
|
||||
runDragDropTest();
|
||||
}}, 500);
|
||||
|
||||
// Add test button for manual debugging
|
||||
const testButton = document.createElement('button');
|
||||
testButton.textContent = '🧪 Test Drag & Drop';
|
||||
testButton.style.cssText = 'position: fixed; top: 10px; right: 10px; z-index: 9999; padding: 10px; background: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer;';
|
||||
testButton.onclick = runDragDropTest;
|
||||
document.body.appendChild(testButton);
|
||||
|
||||
// Add bounce animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue