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

Question

Originally asked by @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 uses a simple CSS technique to render the placeholder: :before and :after pseudoelements.

Unfortunately, this doesn't work with HTML tables because table semantics are very restrictive. To work around this problem, top/bottom padding on table cells can be used instead of selectors.

This is not a great solution because padding appears inside table cells. If you want your cells to have borders, you'll have to apply them to inner elements instead.

Tables are now part of the demo, please have a look.

Here are the CSS overrides used in the demo:

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

If this approach does not suit you, unfortunately, this addon currently cannot offer anything else. You'll have to either revert to divs or use another drag-sorting addon.