[Jquery] Sortable 라이브러리 사용하여 리스트 드래그 앤 드롭 만들기

Todo List / table List 등 다양한 리스트들 있습니다.

리스트들을 드래그 해서 순서를 변경하는 코드 소개합니다

 

Sortable  라이브러리 사용했습니다.

기본적인 리스트를 마지막버튼을 드래그 하여

초록색 점이 2번째로 이동!

 

 

😎 CDN 

 <!-- 드래그 & 드롭 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js" integrity="sha512-zYXldzJsDrNKV+odAwFYiDXV2Cy37cwizT+NkuiPGsa9X1dOz04eHvUWVuxaJ299GvcJT31ug2zO4itXBjFx4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

//드래그 & 드롭
Sortable.create(listWithHandle, {
  handle: '.my-handle',
  animation: 150,
  // Element dragging ended
  onEnd: function (e) {
  //드롭했을때 이벤트 실행
  	var itemEl = e.item;  // dragged HTMLElement
  	console.log(e.newIndex+1);
  	updateSort();	
  }
});

updateSort()함수를 만들어

리스트를 드롭했을때 순서를 자동 저장하게끔 만들었습니다 ㅎㅎ

 

handle: '.my-handle',

my-handle 타입을 하여 아이콘을 넣어줬습니다,

 

부트스트랩 임포트 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<span class="glyphicon glyphicon-sort my-handle" aria-hidden="true" style="top:-1px"></span>

버튼에 클래스를 넣어줍니다

 

아래 링크에서 다양한 데모 확인가능합니다.

https://github.com/SortableJS/Sortable

http://sortablejs.github.io/Sortable/