Upload 40 files

tower.html

@@ -170,6 +170,7 @@
             vertical-align: middle;
             transition: all 0.3s;
             touch-action: none;
+            will-change: transform;
         }
         
         .drop-zone.filled {
@@ -209,6 +210,7 @@
             z-index: 10;
             will-change: transform;
             touch-action: none;
+            -webkit-tap-highlight-color: transparent;
         }
         
         .drag-item:hover {
@@ -395,6 +397,7 @@
         .sortable-container {
             min-height: 40px;
             touch-action: none;
+            will-change: transform;
         }
         
         .sortable-fallback {
@@ -521,25 +524,7 @@
             </div>
         </div>
     </div>
-
-    <script src="tower.js"></script>
     
-    <!-- 音樂連續播放控制 -->
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const bgmAudio = document.getElementById('bgm');
-            const toggleBgmBtn = document.getElementById('toggle-bgm');
-            
-            // 從localStorage獲取音樂播放狀態
-            const musicPlaying = localStorage.getItem('towerMusicPlaying');
-            
-            if (musicPlaying === 'true') {
-                bgmAudio.play().catch(e => console.log('自動播放被阻止:', e));
-                toggleBgmBtn.textContent = '音樂關';
-            } else {
-                toggleBgmBtn.textContent = '音樂開';
-            }
-        });
-    </script>
+    <script src="tower.js"></script>
 </body>
 </html>

tower.js

@@ -390,8 +390,8 @@ document.addEventListener('DOMContentLoaded', function() {
                     parent.classList.remove('filled');
                     parent.style.backgroundColor = 'rgba(100, 100, 100, 0.5)';
                     
-                    // 將元素移回拖拽項容器
-                    dragItemsContainer.appendChild(this);
+                    // 移除元素
+                    this.remove();
                     
                     // 更新保存的答案
                     updateSavedAnswers();
@@ -406,7 +406,7 @@ document.addEventListener('DOMContentLoaded', function() {
         const dragItemsSortable = new Sortable(dragItemsContainer, {
             group: {
                 name: 'formula',
-                pull: true,
+                pull: 'clone', // 設置為clone模式，拖拽時複製元素
                 put: true
             },
             animation: 100,
@@ -422,6 +422,25 @@ document.addEventListener('DOMContentLoaded', function() {
             },
             onEnd: function(evt) {
                 evt.item.style.opacity = '1';
+            },
+            // 當元素被複製時
+            onClone: function(evt) {
+                const clone = evt.clone;
+                
+                // 為複製的元素添加點擊事件，點擊可移除（如果在拖放區內）
+                clone.addEventListener('click', function() {
+                    const parent = this.parentElement;
+                    if (parent && parent.classList.contains('drop-zone')) {
+                        parent.classList.remove('filled');
+                        parent.style.backgroundColor = 'rgba(100, 100, 100, 0.5)';
+                        
+                        // 移除元素
+                        this.remove();
+                        
+                        // 更新保存的答案
+                        updateSavedAnswers();
+                    }
+                });
             }
         });
         
@@ -445,8 +464,8 @@ document.addEventListener('DOMContentLoaded', function() {
                                 parent.classList.remove('filled');
                                 parent.style.backgroundColor = 'rgba(100, 100, 100, 0.5)';
                                 
-                                // 將元素移回拖拽項容器
-                                dragItemsContainer.appendChild(this);
+                                // 移除元素
+                                this.remove();
                                 
                                 // 更新保存的答案
                                 updateSavedAnswers();
@@ -457,9 +476,6 @@ document.addEventListener('DOMContentLoaded', function() {
                         dropZones[index].appendChild(clonedItem);
                         dropZones[index].classList.add('filled');
                         dropZones[index].style.backgroundColor = 'rgba(255, 140, 0, 0.3)';
-                        
-                        // 從原始拖拽項容器中移除
-                        dragItem.remove();
                     }
                 }
             });