[sortablejs] - 01. Simple list example

📌 접속

https://sortablejs.github.io/Sortable/

📌 예제 확인

📌 라이브러리 CDN 주소 확인

https://github.com/SortableJS/Sortable#cdn

📌 결과물

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #Target1 {
    list-style: none;
  }

  #Target1>li {
    border: 1px solid #333;
    padding: 5px;
    cursor: pointer;
  }

  #Target1>li.GhostItem {
    background-color: skyblue;
  }
</style>
<ul id="Target1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
  const target_1 = document.querySelector('#Target1');
  new Sortable(target_1, {
    animation: 150,
    ghostClass: 'GhostItem'
  });
</script>