pleaase ensure that I can dragand drop components

components/control-panel.js

@@ -61,15 +61,15 @@ class CustomControlPanel extends HTMLElement {
 
       <script>
         this.shadowRoot.querySelectorAll('.component-item').forEach(item => {
-          item.addEventListener('click', () => {
+          item.addEventListener('mousedown', (e) => {
+            e.preventDefault();
             const type = item.dataset.type;
             document.dispatchEvent(new CustomEvent('component-selected', {
               detail: { type }
             }));
           });
         });
-
-        const deleteBtn = this.shadowRoot.getElementById('delete-btn');
+const deleteBtn = this.shadowRoot.getElementById('delete-btn');
         if (deleteBtn) {
           deleteBtn.addEventListener('click', () => {
             document.dispatchEvent(new CustomEvent('delete-selected'));

script.js

@@ -171,16 +171,37 @@ const dx = x - m.x * canvas.width;
             y: 0.5,
             strength: 0.5,
             polarity: 1,
-            turns: e.detail.type === 'coil' ? 5 : 0
+            turns: e.detail.type === 'coil' ? 5 : 0,
+            isBeingDragged: true // Flag for new component being dragged
         };
         
         components[e.detail.type + 's'].push(newComponent);
         selectedComponent = newComponent;
         drawField();
         updateComponentDetails();
-    });
+        
+        // Set up initial drag for newly created component
+        const handleMouseMove = (moveEvent) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = moveEvent.clientX - rect.left;
+            const y = moveEvent.clientY - rect.top;
+            
+            selectedComponent.x = x / canvas.width;
+            selectedComponent.y = y / canvas.height;
+            drawField();
+            updateComponentDetails();
+        };
 
-    // Handle component deletion
+        const handleMouseUp = () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            selectedComponent.isBeingDragged = false;
+        };
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    });
+// Handle component deletion
     document.addEventListener('delete-selected', () => {
         if (selectedComponent) {
             const type = selectedComponent.type;
@@ -228,11 +249,34 @@ const dx = x - m.x * canvas.width;
             }
         }
         
+        if (selectedComponent) {
+            // Prevent text selection during drag
+            e.preventDefault();
+            
+            // Set up drag handlers
+            const handleMouseMove = (moveEvent) => {
+                const newX = moveEvent.clientX - rect.left;
+                const newY = moveEvent.clientY - rect.top;
+                
+                selectedComponent.x = newX / canvas.width;
+                selectedComponent.y = newY / canvas.height;
+                drawField();
+                updateComponentDetails();
+            };
+
+            const handleMouseUp = () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        
         drawField();
         updateComponentDetails();
     });
-
-    canvas.addEventListener('mousemove', (e) => {
+canvas.addEventListener('mousemove', (e) => {
         if (!isDrawingWire && !selectedComponent) return;
         
         const rect = canvas.getBoundingClientRect();