ember-drag-sort：基于 HTML table 实现 sortable 列表？

Question

最初由 @livfwd on GitHub 提问。

It seems like the :before :after pseudo-elements break the table layout and put the placeholder in unexpected places when dragging rows within a table.

Are there any known workarounds for this?

Answer 1

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

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

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

表格现在是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 或使用另一个拖动排序插件。

ember-drag-sort：基于 HTML table 实现 sortable 列表？

ember-drag-sort: implementing a sortable list based on an HTML table?

html

javascript

ember.js

ember-drag-sort