diff options
author | elioat <elioat@tilde.institute> | 2025-01-10 21:34:29 -0500 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2025-01-10 21:34:29 -0500 |
commit | f15fc6b3ec238b135707c0600a151bfe106d6aad (patch) | |
tree | 390d3b4778a4e413913bfcaa7341cc545bfb94d1 /html | |
parent | a82654b7d043b85649a25a20c33baa42ecc35c29 (diff) | |
download | tour-f15fc6b3ec238b135707c0600a151bfe106d6aad.tar.gz |
*
Diffstat (limited to 'html')
-rw-r--r-- | html/cards/script.js | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/html/cards/script.js b/html/cards/script.js index 9f11282..5669d3a 100644 --- a/html/cards/script.js +++ b/html/cards/script.js @@ -125,8 +125,9 @@ const handleMouseMove = e => { if (!gameState.draggingCard) return; const rect = canvas.getBoundingClientRect(); - gameState.draggingCard.x = e.clientX - rect.left; - gameState.draggingCard.y = e.clientY - rect.top; + // Update the card's position using the offset + gameState.draggingCard.x = e.clientX - rect.left - dragOffset.x; + gameState.draggingCard.y = e.clientY - rect.top - dragOffset.y; renderAllCards(gameState.cards); }; @@ -137,6 +138,8 @@ const handleMouseUp = () => { document.removeEventListener('mouseup', handleMouseUp); }; +let dragOffset = { x: 0, y: 0 }; // To store the offset of the click position + const handleMouseDown = e => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; @@ -156,6 +159,10 @@ const handleMouseDown = e => { if (clickedCard) { gameState.draggingCard = clickedCard; + // Calculate the offset between the mouse position and the card's position + dragOffset.x = x - clickedCard.x; + dragOffset.y = y - clickedCard.y; + // Move the dragged card to the top of the stack gameState.cards = gameState.cards.filter(card => card !== clickedCard); gameState.cards.push(clickedCard); |