Fork me on GitHub

<tomalec-sortable-list>

Custom Element for sortable list that uses CSS flexbox to arrange items. Therefore it does not change order of elements in DOM

As it is Custom Element it is CSS framework agnostic, you can use any CSS rules/libs/framework to style it.

Bootstrap example fiddle with it at jsbin.com

  • This is tomalec-sortable-list
  • It works with Bootstrap...
  • ...out of the box.
  • In fact it works with any CSS library, as it is just an HTML Element.
  • It uses flex box layout, so does not change the order of items in DOM.
  • Just drag some elements around.
    •

    Gotchas

    Please, note that one of the key features of <tomalec-sortable-list> is the fact that it does not change the DOM, or the order of elements in the document. That could bring performance and consistency benefits, as well as a nice separation between data and layout.
    Therefore CSS rules needs to take into account that the visually-first element is not necessarily :first-child - the first child is always the same element, no matter where the user dropped it.

    Other examples