Technique SCR27:Reordering page sections using the Document Object Model

Example 1

This example does up and down reordering. This approach can also be used for two-dimensional reordering by adding left and right options.

The components in this example are list items in an unordered list. Unordered lists are a very good semantic model for sets of similar items. The menu approach can also be used for other types of groupings.

In this example, the menu is always visible. This is a good approach for components that are not too numerous, as it allows users to see the options without having to open a menu.

  const list = document.getElementById('myList');

  // Attach a single event listener to the whole list
  list.addEventListener('click', function (e) {
    
    // Ensure the click came from a button
    if (e.target.tagName !== 'BUTTON') return;

    // Get the <li> that contains the clicked button
    const li = e.target.closest('li');

    // Move up: insert the clicked <li> before its previous sibling
    if (e.target.classList.contains('up') && li.previousElementSibling) {
      li.parentNode.insertBefore(li, li.previousElementSibling);
    }

    // Move down: insert the next sibling before the clicked <li>
    if (e.target.classList.contains('down') && li.nextElementSibling) {
      li.parentNode.insertBefore(li.nextElementSibling, li);
    }
  });