ember-drag-sort:实现基于 HTML 表的可排序列表

Question

最初由 GitHub 上的@livfwd询问。

似乎 ：before：after 伪元素会破坏表格布局，并在表格中拖动行时将占位符放在意想不到的位置。

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

Answer 1

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

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

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

表格现在是演示的一部分，请看一下。

以下是演示中使用的 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;
    }

不幸的是，如果这种方法不适合您，则此插件目前无法提供其他任何功能。您必须恢复到 div s 或使用另一个拖动排序插件。