demo/sorting.html

<html>

<head>
  <title>Sorting contacts</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <style>
    body {
      font-family: Roboto, Helvetica, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    label {
      margin: 10px 0;
    }

    virtual-scroller {
      flex: 1;
      border-top: 2px solid #eee;
      border-bottom: 2px solid #eee;
    }
  </style>
</head>

<body>

  <label>
    <input type="checkbox" onchange="toggleElementKey(this.checked)"> Use
    <code>contact.guid</code> as
    <code>elementKey</code>
  </label>
  <virtual-scroller>
    <template>
      <contact-element sortable></contact-element>
    </template>
  </virtual-scroller>

  <script type="module">
    import { ItemSource } from '../virtual-scroller-element.js';
    import './contacts/contact-element.js';

    const virtualScroller = document.querySelector('virtual-scroller');

    const onMoveup = (event) => moveContact(event.target.contact, -1);
    const onMovedown = (event) => moveContact(event.target.contact, 1);
    virtualScroller.updateElement = (element, contact) => {
      element.addEventListener('moveup', onMoveup);
      element.addEventListener('movedown', onMovedown);
      element.contact = contact;
    };

    let myContacts = null;
    fetch('contacts/contacts.json').then((resp) => resp.json()).then((contacts) => {
      myContacts = contacts;
      toggleElementKey();
    });

    function moveContact(contact, offset) {
      const i = myContacts.indexOf(contact);
      const newI = Math.max(0, Math.min(myContacts.length, i + offset));
      myContacts.splice(i, 1); // remove it
      myContacts.splice(newI, 0, contact); // add it to new position
      virtualScroller.itemsChanged(); // notify virtual-scroller
    }

    window.toggleElementKey = function toggleElementKey(useGuid) {
      const key = useGuid ? (contact) => contact.guid : (_, index) => index;
      virtualScroller.itemSource = ItemSource.fromArray(myContacts, key);
    };
  </script>
</body>

</html>