Move parts of the user interface without loss of interaction

by Génesis García Morilla

HTML

<ul>
  <li>
    <button id="up">Up</button>
    <button id="down">Down</button>
  </li>
  <li>Nothing</li>
  <li>Nothing</li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  text-align: center;
  border: 1px dashed #7f94a1;
  padding: 5px;
  margin-bottom: 5px;
  color: #7f94a1;
}

button {
  color: #555;
  border: 3px solid #ccc;
  padding: 7px 10px;
  text-transform: uppercase;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  border: 3px solid orange;
}

JavaScript

document.querySelector('#up').onclick = e => {
  const $li = e.target.parentElement

  if ($li.previousElementSibling)
    $li.parentElement.insertBefore($li, $li.previousElementSibling)
}

document.querySelector('#down').onclick = e => {
  const $li = e.target.parentElement

  if ($li.nextElementSibling)
    $li.parentElement.insertBefore($li.nextElementSibling, $li)
}