Allow dragging blocks across columns

Enabled dragging of blocks between columns before the simulation begins in `src/components/BulgarianSolitaire.tsx`.

src/components/BulgarianSolitaire.tsx

@@ -75,6 +75,26 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
     setDraggedBox(null);
   };
 
+  const handleDropToContainer = (e: React.DragEvent) => {
+    e.preventDefault();
+    if (draggedBox === null) return;
+
+    const box = boxes.find(b => b.id === draggedBox);
+    if (!box || box.columnIndex === null) return;
+
+    // Remove from column
+    setColumns(prev => prev.map((col, idx) => 
+      idx === box.columnIndex ? col.filter(id => id !== draggedBox) : col
+    ));
+
+    // Return to container
+    setBoxes(prev => prev.map(b => 
+      b.id === draggedBox ? { ...b, columnIndex: null } : b
+    ));
+
+    setDraggedBox(null);
+  };
+
   const handleDoubleClick = (boxId: number) => {
     const box = boxes.find(b => b.id === boxId);
     if (!box || box.columnIndex === null) return;
@@ -237,7 +257,11 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
 
       {/* Container */}
       <div className="flex justify-center">
-        <div className="border-2 border-dashed border-muted-foreground rounded-lg p-4 min-h-[120px] bg-muted/20">
+        <div 
+          className="border-2 border-dashed border-muted-foreground rounded-lg p-4 min-h-[120px] bg-muted/20"
+          onDragOver={handleDragOver}
+          onDrop={handleDropToContainer}
+        >
           <div className="text-center text-sm text-muted-foreground mb-2">Container</div>
           <div className="flex flex-wrap gap-2 justify-center max-w-md">
             {containerBoxes.map((box) => (
@@ -277,13 +301,15 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
               {column.map((boxId, boxIndex) => (
                 <div
                   key={boxId}
+                  draggable={!isPlaying}
+                  onDragStart={(e) => handleDragStart(e, boxId)}
                   onDoubleClick={() => handleDoubleClick(boxId)}
-                  className={`w-8 h-8 rounded cursor-pointer transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${
+                  className={`w-8 h-8 rounded cursor-move transition-all duration-300 flex items-center justify-center text-xs font-medium mx-auto ${
                     highlightedBoxes.has(boxId) 
                       ? 'bg-red-500 text-white shadow-lg scale-110' 
                       : 'bg-primary text-primary-foreground hover:bg-primary/80'
                   } ${isAnimating && highlightedBoxes.has(boxId) ? 'animate-pulse' : ''}`}
-                  title="Double-click to return to container"
+                  title="Drag to move or double-click to return to container"
                 >
                   {boxId + 1}
                 </div>
@@ -321,7 +347,8 @@ const BulgarianSolitaire: React.FC<BulgarianSolitaireProps> = ({ showSocialShare
         <ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
           <li>Choose a value for n (2-6) using the slider</li>
           <li>Drag the {totalBoxes} numbered boxes from the container into any of the columns</li>
-          <li>Double-click any box in a column to return it to the container</li>
+          <li>Drag boxes between columns to rearrange them as needed</li>
+          <li>Drag boxes back to the container or double-click any box in a column to return it</li>
           <li>Once all boxes are placed in columns, click "Play" to start the simulation</li>
           <li>Watch as the algorithm takes one box from each non-empty column to form a new column</li>
           <li>The process continues until reaching the triangular configuration: columns of sizes 1, 2, 3, ..., n</li>