微件

TierListMaker：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,124次编辑
小无编辑摘要
第10行： 第10行：
     gap: 5px;
     gap: 5px;
     align-content: flex-start;
     align-content: flex-start;
     padding: 5px;
     padding: 10px;
}
    min-height: 80px;


.tier-row.drag-over {
.tier-row.drag-over {
第25行： 第25行：
     align-content: flex-start;
     align-content: flex-start;
     padding: 10px;
     padding: 10px;
    min-height: 100px;
}
}


第34行： 第35行：
     width: 100%;
     width: 100%;
     table-layout: fixed;
     table-layout: fixed;
    border-collapse: collapse;
}
}


第39行： 第41行：
     width: 100px;
     width: 100px;
     position: relative;
     position: relative;
    vertical-align: top;
}
}


.tierlist-table td {
.tierlist-table td {
     padding: 0 !important;
     padding: 0 !important;
}
    vertical-align: top;


.tierlist-controls {
.tierlist-controls {
第117行： 第120行：
}
}


/* 编辑模式下的样式 */
.tier-header.editable {
.tier-header.editable {
     cursor: pointer;
     cursor: pointer;
第155行： 第159行：
}
}


/* 颜色选择器容器 */
.color-picker-popup {
.color-picker-popup {
     position: fixed;
     position: fixed;
第220行： 第225行：
}
}


/* 确保avatar-frame正确显示 */
.avatar-frame {
.avatar-frame {
     display: inline-block;
     display: inline-block;
     margin: 0;
     margin: 0;
    cursor: move; /* 显示可移动光标 */
}
.avatar-frame.dragging {
    opacity: 0.5;
}
/* 空的tier-row显示提示 */
.tier-row:empty::before {
    content: '拖放角色到这里';
    color: #999;
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
}
</style>
</style>
第232行： 第255行：
     'use strict';
     'use strict';
      
      
    // 防止重复初始化
     if (window.TierlistMakerInitialized) {
     if (window.TierlistMakerInitialized) {
         console.log('TierlistMaker already initialized');
         console.log('TierlistMaker already initialized');
第246行： 第268行：
          
          
         init: function() {
         init: function() {
            // 等待DOM完全加载
             if (document.readyState === 'loading') {
             if (document.readyState === 'loading') {
                 document.addEventListener('DOMContentLoaded', () => this.setup());
                 document.addEventListener('DOMContentLoaded', () => this.setup());
第255行： 第276行：
          
          
         setup: function() {
         setup: function() {
            // 检查角色池是否已加载
             const characterPool = document.getElementById('character-pool');
             const characterPool = document.getElementById('character-pool');
             const avatars = characterPool ? characterPool.querySelectorAll('.avatar-frame') : [];
             const avatars = characterPool ? characterPool.querySelectorAll('.avatar-frame') : [];
              
              
             if (avatars.length === 0 && this.initRetryCount < this.maxRetries) {
             if (avatars.length === 0 && this.initRetryCount < this.maxRetries) {
                // 角色还未加载，等待后重试
                 this.initRetryCount++;
                 this.initRetryCount++;
                 console.log('等待角色加载...', this.initRetryCount);
                 console.log('等待角色加载...', this.initRetryCount);
                 setTimeout(() => this.setup(), 300);
                 setTimeout(() => this.setup(), 300);
                 return;
                 return;
            }
           
            if (avatars.length === 0) {
                console.warn('未找到角色，可能加载失败');
             }
             }
              
              
第276行： 第291行：
             this.initDragAndDrop();
             this.initDragAndDrop();
             this.initButtons();
             this.initButtons();
            // 注意：不在这里调用 loadState()
         },
         },
          
          
        // 清理容器中的空元素
         cleanupContainers: function() {
         cleanupContainers: function() {
             const containers = document.querySelectorAll('.tier-row, #character-pool');
             const containers = document.querySelectorAll('.tier-row, #character-pool');
第301行： 第314行：
             console.log('初始化拖拽功能...');
             console.log('初始化拖拽功能...');
              
              
             // 使用事件委托方式处理拖拽
             // 初始化所有avatar的拖拽
             const characterPool = document.getElementById('character-pool');
             this.initAvatarsDraggable();
            const tierRows = document.querySelectorAll('.tier-row');
           
            // 为现有和未来的avatar元素添加拖拽
            this.makeDraggable(characterPool);
            tierRows.forEach(row => this.makeDraggable(row));
           
            // 为tier行添加拖放事件
            tierRows.forEach(row => {
                if (!row.getAttribute('data-drop-initialized')) {
                    row.setAttribute('data-drop-initialized', 'true');
                    row.addEventListener('dragover', (e) => this.handleDragOver(e, row));
                    row.addEventListener('drop', (e) => this.handleDrop(e, row));
                    row.addEventListener('dragleave', (e) => this.handleDragLeave(e, row));
                }
            });
              
              
             // 为角色池添加拖放事件
             // 初始化所有drop区域
             if (characterPool && !characterPool.getAttribute('data-drop-initialized')) {
             this.initDropZones();
                characterPool.setAttribute('data-drop-initialized', 'true');
                characterPool.addEventListener('dragover', (e) => this.handleDragOver(e, characterPool));
                characterPool.addEventListener('drop', (e) => this.handleDrop(e, characterPool));
                characterPool.addEventListener('dragleave', (e) => this.handleDragLeave(e, characterPool));
            }
         },
         },
          
          
         // 使容器内的所有avatar可拖拽
         // 初始化所有avatar元素的拖拽功能
         makeDraggable: function(container) {
         initAvatarsDraggable: function() {
             if (!container) return;
             const allAvatars = document.querySelectorAll('.avatar-frame');
            console.log('设置可拖拽的角色数量:', allAvatars.length);
              
              
             const avatars = container.querySelectorAll('.avatar-frame');
             allAvatars.forEach(avatar => {
            avatars.forEach(avatar => {
                 if (!avatar.hasAttribute('draggable')) {
                 if (!avatar.getAttribute('data-drag-initialized')) {
                     avatar.setAttribute('draggable', 'true');
                     avatar.setAttribute('draggable', 'true');
                    avatar.setAttribute('data-drag-initialized', 'true');
                      
                      
                     avatar.addEventListener('dragstart', (e) => this.handleDragStart(e, avatar));
                    // 移除旧的事件监听器（如果存在）
                     avatar.addEventListener('dragend', (e) => this.handleDragEnd(e, avatar));
                    avatar.ondragstart = null;
                    avatar.ondragend = null;
                   
                    // 添加新的事件监听器
                     avatar.addEventListener('dragstart', (e) => {
                        this.handleDragStart(e, avatar);
                    });
                   
                     avatar.addEventListener('dragend', (e) => {
                        this.handleDragEnd(e, avatar);
                    });
                      
                      
                     console.log('已设置拖拽:', avatar);
                     console.log('已设置拖拽:', avatar);
                 }
                 }
             });
             });
        },
       
        // 初始化所有drop区域
        initDropZones: function() {
            // 为所有tier行添加drop事件
            const tierRows = document.querySelectorAll('.tier-row');
            console.log('初始化drop区域数量:', tierRows.length);
           
            tierRows.forEach(row => {
                // 移除旧的事件监听器
                const newRow = row.cloneNode(true);
                row.parentNode.replaceChild(newRow, row);
               
                // 添加新的事件监听器
                newRow.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    e.dataTransfer.dropEffect = 'move';
                    newRow.classList.add('drag-over');
                });
               
                newRow.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // 检查是否真的离开了该元素
                    const rect = newRow.getBoundingClientRect();
                    if (e.clientX < rect.left || e.clientX >= rect.right ||
                        e.clientY < rect.top || e.clientY >= rect.bottom) {
                        newRow.classList.remove('drag-over');
                    }
                });
               
                newRow.addEventListener('drop', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.handleDrop(e, newRow);
                });
               
                // 重新设置该行中已有avatar的拖拽
                newRow.querySelectorAll('.avatar-frame').forEach(avatar => {
                    if (!avatar.hasAttribute('draggable')) {
                        avatar.setAttribute('draggable', 'true');
                        avatar.addEventListener('dragstart', (e) => this.handleDragStart(e, avatar));
                        avatar.addEventListener('dragend', (e) => this.handleDragEnd(e, avatar));
                    }
                });
            });
           
            // 为角色池添加drop事件
            const characterPool = document.getElementById('character-pool');
            if (characterPool) {
                // 移除旧的事件监听器
                const newPool = characterPool.cloneNode(true);
                characterPool.parentNode.replaceChild(newPool, characterPool);
               
                newPool.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    e.dataTransfer.dropEffect = 'move';
                    newPool.classList.add('drag-over');
                });
               
                newPool.addEventListener('dragleave', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    const rect = newPool.getBoundingClientRect();
                    if (e.clientX < rect.left || e.clientX >= rect.right ||
                        e.clientY < rect.top || e.clientY >= rect.bottom) {
                        newPool.classList.remove('drag-over');
                    }
                });
               
                newPool.addEventListener('drop', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.handleDrop(e, newPool);
                });
               
                // 重新设置角色池中avatar的拖拽
                newPool.querySelectorAll('.avatar-frame').forEach(avatar => {
                    if (!avatar.hasAttribute('draggable')) {
                        avatar.setAttribute('draggable', 'true');
                        avatar.addEventListener('dragstart', (e) => this.handleDragStart(e, avatar));
                        avatar.addEventListener('dragend', (e) => this.handleDragEnd(e, avatar));
                    }
                });
            }
         },
         },
          
          
第351行： 第440行：
             this.sourceContainer = element.parentElement;
             this.sourceContainer = element.parentElement;
             element.classList.add('dragging');
             element.classList.add('dragging');
            element.style.opacity = '0.5';
             e.dataTransfer.effectAllowed = 'move';
             e.dataTransfer.effectAllowed = 'move';
             e.dataTransfer.setData('text/html', element.innerHTML);
             e.dataTransfer.setData('text/html', element.innerHTML);
第357行： 第445行：
          
          
         handleDragEnd: function(e, element) {
         handleDragEnd: function(e, element) {
             console.log('结束拖拽:', element);
             console.log('结束拖拽');
             element.classList.remove('dragging');
             element.classList.remove('dragging');
            element.style.opacity = '1';
              
              
             document.querySelectorAll('.drag-over').forEach(el => {
             document.querySelectorAll('.drag-over').forEach(el => {
第372行： 第459行：
         },
         },
          
          
         handleDragOver: function(e, element) {
         handleDrop: function(e, targetContainer) {
             e.preventDefault();
             console.log('放置到:', targetContainer);
            e.stopPropagation();
           
            e.dataTransfer.dropEffect = 'move';
           
            if (!element.classList.contains('drag-over')) {
                element.classList.add('drag-over');
            }
           
            return false;
        },
       
        handleDragLeave: function(e, element) {
            const rect = element.getBoundingClientRect();
            const x = e.clientX;
            const y = e.clientY;
           
            if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
                element.classList.remove('drag-over');
            }
        },
       
        handleDrop: function(e, element) {
            e.preventDefault();
            e.stopPropagation();
              
              
             console.log('放置到:', element);
             targetContainer.classList.remove('drag-over');
              
              
            element.classList.remove('drag-over');
             if (this.draggedElement && this.draggedElement.parentElement !== targetContainer) {
           
                // 从原位置移除
             if (this.draggedElement && this.draggedElement.parentElement !== element) {
                 if (this.draggedElement.parentElement) {
                 if (this.draggedElement.parentElement) {
                     this.draggedElement.parentElement.removeChild(this.draggedElement);
                     this.draggedElement.parentElement.removeChild(this.draggedElement);
                 }
                 }
                  
                  
                 element.appendChild(this.draggedElement);
                 // 添加到新位置
                targetContainer.appendChild(this.draggedElement);
                  
                  
                // 确保样式正常
                this.draggedElement.style.opacity = '1';
                 const img = this.draggedElement.querySelector('img');
                 const img = this.draggedElement.querySelector('img');
                 if (img) {
                 if (img) {
第419行： 第484行：
                 console.log('放置成功');
                 console.log('放置成功');
             }
             }
           
            return false;
         },
         },
          
          
第464行： 第527行：
                         deleteBtn.onclick = (e) => {
                         deleteBtn.onclick = (e) => {
                             e.stopPropagation();
                             e.stopPropagation();
                             this.deleteRow(header.parentElement);
                             this.deleteRow(header.closest('tr'));
                         };
                         };
                         header.appendChild(deleteBtn);
                         header.appendChild(deleteBtn);
第526行： 第589行：
                     newDeleteBtn.onclick = (e) => {
                     newDeleteBtn.onclick = (e) => {
                         e.stopPropagation();
                         e.stopPropagation();
                         this.deleteRow(header.parentElement);
                         this.deleteRow(header.closest('tr'));
                     };
                     };
                     header.appendChild(newDeleteBtn);
                     header.appendChild(newDeleteBtn);
                      
                      
                     const row = header.parentElement.querySelector('.tier-row');
                     const row = header.closest('tr').querySelector('.tier-row');
                     if (row) {
                     if (row) {
                         row.setAttribute('data-tier', newName);
                         row.setAttribute('data-tier', newName);
第574行： 第637行：
              
              
             const tbody = table.querySelector('tbody');
             const tbody = table.querySelector('tbody');
            const newRow = document.createElement('tr');
           
             const tierCount = document.querySelectorAll('.tier-row').length;
             const tierCount = document.querySelectorAll('.tier-row').length;
             const tierName = 'T' + (tierCount + 1);
             const tierName = 'T' + (tierCount + 1);
              
              
            const newRow = document.createElement('tr');
             newRow.innerHTML = `
             newRow.innerHTML = `
                 <th style="width: 100px; background-color: #9e9e9e; color: white; font-size: 20px; text-align: center" class="tier-header" data-tier="${tierName}">${tierName}</th>
                 <th style="width: 100px; background-color: #9e9e9e; color: white; font-size: 20px; text-align: center" class="tier-header" data-tier="${tierName}">${tierName}</th>
第586行： 第648行：
             tbody.appendChild(newRow);
             tbody.appendChild(newRow);
              
              
             const newTierRow = newRow.querySelector('.tier-row');
             console.log('添加新行:', tierName);
            newTierRow.setAttribute('data-drop-initialized', 'true');
            newTierRow.addEventListener('dragover', (e) => this.handleDragOver(e, newTierRow));
            newTierRow.addEventListener('drop', (e) => this.handleDrop(e, newTierRow));
            newTierRow.addEventListener('dragleave', (e) => this.handleDragLeave(e, newTierRow));
              
              
            // 重新初始化所有drop区域（包括新行）
            this.initDropZones();
           
            // 如果在编辑模式下，添加编辑功能
             if (this.editMode) {
             if (this.editMode) {
                 const header = newRow.querySelector('.tier-header');
                 const header = newRow.querySelector('.tier-header');
第720行： 第782行：
                         `;
                         `;
                         tbody.appendChild(newRow);
                         tbody.appendChild(newRow);
                       
                        const newTierRow = newRow.querySelector('.tier-row');
                        newTierRow.setAttribute('data-drop-initialized', 'true');
                        newTierRow.addEventListener('dragover', (e) => this.handleDragOver(e, newTierRow));
                        newTierRow.addEventListener('drop', (e) => this.handleDrop(e, newTierRow));
                        newTierRow.addEventListener('dragleave', (e) => this.handleDragLeave(e, newTierRow));
                     }
                     }
                 }
                 }
               
                // 重新初始化所有drop区域
                this.initDropZones();
                  
                  
                 setTimeout(() => {
                 setTimeout(() => {
第742行： 第801行：
                     });
                     });
                      
                      
                    // 重新初始化拖拽
                    this.initAvatarsDraggable();
                     this.cleanupContainers();
                     this.cleanupContainers();
                     console.log('状态加载完成');
                     console.log('状态加载完成');
第849行： 第910行：
             allAvatars.forEach(avatar => {
             allAvatars.forEach(avatar => {
                 pool.appendChild(avatar);
                 pool.appendChild(avatar);
                avatar.style.opacity = '1';
                 const img = avatar.querySelector('img');
                 const img = avatar.querySelector('img');
                 if (img) {
                 if (img) {
第855行： 第917行：
             });
             });
              
              
            // 重新初始化拖拽功能
            this.initAvatarsDraggable();
             this.cleanupContainers();
             this.cleanupContainers();
              
              
第873行： 第937行：
     TierlistMaker.init();
     TierlistMaker.init();
      
      
     // 添加手动加载状态的按钮功能
     // 添加手动加载状态的功能
     window.loadTierlistState = function() {
     window.loadTierlistState = function() {
         if (window.TierlistMaker) {
         if (window.TierlistMaker) {

2025年10月20日 (一) 22:04的版本

检索自“http://cznwiki.com/index.php?title=微件:TierListMaker&oldid=3532”