ember-drag-sort：基于HTML表实现可排序列表？

Question

最初由@livfwd GitHub询问。

  

看起来像：before：after伪元素会破坏表格布局，并在拖动表格中的行时将占位符放在意外的位置。

     

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

Answer 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;
    }

如果这种方法不适合你，不幸的是，这个插件目前无法提供其他任何东西。您必须还原到div或使用其他拖动排序插件。