Lit + SortableJS enhancements

[silvester-pari]

I believe there are still some cases where sorting layers causes troubles because of the interaction between Lit and SortableJS. There have been some discussions over in the SortableJs repository which might come in handy. One proposed workaround was: https://lit.dev/playground/#gist=242f45fd2dbe21ecb6902f144686aae8

This addresses the underlying issue which was causing us some trouble:

  firstUpdated() {
    /* 
      List elements have important part marker nodes around them
      which do *not* move when items are dragged with Sortable.
      This can cause the Sortable ordering and Lit's ordering
      to get out of sync.
      To address this, whenever Sortable moves an item, ensure
      the item's markers move with it and this requires understanding how Lit renders parts.

      For a list, Lit renders DOM as follows:
      <parent>
      <!-- list start -->
        <!-- item 0 start --> item <!-- item 0 end -->
        <!-- item 1 start --> item <!-- item 1 end -->
        <!-- item N start --> item 
      <!-- list end -->
      </parent>

      Importantly Lit does *not* have a last item part marker and this must be accounted for.
    */ 
    let before;
    Sortable.create(this.draggableList, {
      animation: 150,
      ghostClass: 'ghost',
      onStart: (e) => {
        before = e.item.previousSibling;
      },
      onEnd: (e) => {
        // put the item back
        before.after(e.item);
        this.items.splice(e.newIndex, 0, this.items.splice(e.oldIndex, 1)[0]);
        this.requestUpdate();
      },
    });
  }