Enhance drag-and-drop experience by improving piece styling and size management

- Added CSS rules to disable transitions during dragging for smoother movement.
- Updated JavaScript to store and maintain the original size of pieces while dragging.
- Cleaned up redundant CSS definitions for the dragging state.

Author: TMHSDigital

css/pieces.css

@@ -14,6 +14,16 @@
     color: transparent !important;
 }
 
+/* Disable transitions during drag for smooth movement */
+.piece.dragging {
+    cursor: grabbing;
+    opacity: 0.8;
+    z-index: 100;
+    pointer-events: none;
+    position: fixed;
+    transition: none !important; /* Disable transitions for smooth dragging */
+}
+
 /* Explicitly disable any ::before or ::after pseudo-elements */
 .piece::before,
 .piece::after {
@@ -31,13 +41,7 @@
     transform: scale(1.1);
 }
 
-.piece.dragging {
-    cursor: grabbing;
-    opacity: 0.8;
-    z-index: 100;
-    pointer-events: none;
-    position: fixed;
-}
+/* Note: .piece.dragging is defined above to disable transitions */
 
 /* Move animations */
 @keyframes move-piece {

js/drag.js

@@ -115,6 +115,9 @@ function handleDragStart(event) {
 
     // Add dragging class for styling and set initial position
     pieceElement.classList.add('dragging');
+    // Store original size to maintain during drag (fixed positioning can lose relative sizing)
+    pieceElement.style.width = `${rect.width}px`;
+    pieceElement.style.height = `${rect.height}px`;
     pieceElement.style.left = `${rect.left}px`;
     pieceElement.style.top = `${rect.top}px`;
 
@@ -169,6 +172,8 @@ function handleDragEnd(event) {
     // Reset position and remove dragging class
     dragState.element.style.left = '';
     dragState.element.style.top = '';
+    dragState.element.style.width = '';
+    dragState.element.style.height = '';
     dragState.element.classList.remove('dragging');
 
     // Only process drop if mouse actually moved (was a drag, not just a click)