【问题标题】:ember-drag-sort: implementing a sortable list based on an HTML table?ember-drag-sort:实现基于 HTML 表格的可排序列表?
【发布时间】:2023-04-08 12:17:02
【问题描述】:

最初是由@livfwdGitHub 上提出的。

似乎 :before :after 伪元素破坏了表格布局,并在表格中拖动行时将占位符放在了意想不到的地方。

是否有任何已知的解决方法?

【问题讨论】:

    标签: javascript html ember.js ember-drag-sort


    【解决方案1】:

    ember-drag-sort 使用简单的 CSS 技术来呈现占位符::before:after 伪元素。

    不幸的是,这不适用于 HTML 表格,因为表格语义非常严格。要解决此问题,可以使用表格单元格上的顶部/底部填充来代替选择器。

    这不是一个很好的解决方案,因为填充出现在表格单元格内。如果您希望单元格有边框,则必须将它们应用于内部元素。

    表格现在是demo 的一部分,请查看。

    以下是演示中使用的 CSS 覆盖:

        table {
          width: 100%;
        }
    
        table.dragSortList.-isExpanded {
          padding: 15px;
          background-color: #f6f6f6;
        }
    
        table.dragSortList.-isExpanded.-isDraggingOver {
          background-color: #eee;
        }
    
        table.dragSortList.-isExpanded.-isDraggingOver:before {
          content: none;
        }
    
        tr.dragSortItem.-placeholderAbove:before,
        tr.dragSortItem.-placeholderBelow:before {
          content: none;
        }
    
        tr.dragSortItem.-placeholderAbove td {
          padding-top: 25px;
        }
    
        tr.dragSortItem.-placeholderBelow td {
          padding-bottom: 25px;
        }
    
        table .the-item {
          margin: 0;
        }
    

    如果这种方法不适合您,很遗憾,此插件目前无法提供任何其他功能。您必须恢复到 divs 或使用另一个拖动排序插件。

    【讨论】: