still i cant drag and get the element on my working area. and properties aslo not usable. please make it working - Follow Up Deployment

index.html

@@ -10,6 +10,12 @@
         .element-item {
             transition: all 0.2s ease;
             cursor: grab;
+            user-select: none;
+        }
+        .draggable-element {
+            position: absolute;
+            z-index: 1;
+            user-select: none;
         }
         .element-item:hover {
             transform: translateY(-2px);
@@ -277,6 +283,7 @@
         </div>
     </div>
 
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     <!-- Export Modal -->
     <div id="export-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
         <div class="bg-white rounded-lg shadow-xl w-full max-w-xl">
@@ -641,9 +648,9 @@
                 emptyCanvasMsg.style.display = 'none';
                 
                 const template = elementTemplates[type];
-                const element = document.createElement('div');
-                element.innerHTML = template.html;
-                element = element.firstChild;
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = template.html;
+                const element = tempDiv.firstChild;
                 
                 element.style.position = 'absolute';
                 element.style.left = `${x - (template.width / 2)}px`;
@@ -906,31 +913,31 @@
             }
 
             // Property panel updates
-            document.getElementById('prop-x').addEventListener('change', function() {
+            document.getElementById('prop-x').addEventListener('input', function() {
                 if (selectedElement) {
                     selectedElement.style.left = `${this.value}px`;
                 }
             });
             
-            document.getElementById('prop-y').addEventListener('change', function() {
+            document.getElementById('prop-y').addEventListener('input', function() {
                 if (selectedElement) {
                     selectedElement.style.top = `${this.value}px`;
                 }
             });
             
-            document.getElementById('prop-width').addEventListener('change', function() {
+            document.getElementById('prop-width').addEventListener('input', function() {
                 if (selectedElement) {
                     selectedElement.style.width = `${this.value}px`;
                 }
             });
             
-            document.getElementById('prop-height').addEventListener('change', function() {
+            document.getElementById('prop-height').addEventListener('input', function() {
                 if (selectedElement) {
                     selectedElement.style.height = `${this.value}px`;
                 }
             });
             
-            document.getElementById('prop-content').addEventListener('change', function() {
+            document.getElementById('prop-content').addEventListener('input', function() {
                 if (selectedElement) {
                     if (selectedElement.dataset.type === 'text') {
                         selectedElement.querySelector('p').textContent = this.value;
@@ -1090,6 +1097,7 @@
             
             const canvas = document.getElementById('canvas');
             canvas.className = `bg-${bgColor} text-${textColor} shadow-lg w-full max-w-4xl min-h-[80vh] relative canvas-placeholder`;
+            canvas.style.backgroundColor = ''; // Clear inline style
             
             // Update all existing elements with the new color scheme
             document.querySelectorAll('.draggable-element').forEach(el => {

prompts.txt

@@ -1 +1,2 @@
-ELEMENT AND APPLY THEME IS NOT WORKING AND ALSO PROVE SHARE BUTTON THAT DIRECT LINK TO WHATSAPP
+ELEMENT AND APPLY THEME IS NOT WORKING AND ALSO PROVE SHARE BUTTON THAT DIRECT LINK TO WHATSAPP
+still i cant drag and get the element on my working area. and properties aslo not usable. please make it working