Draggable Table, 아이템을 드래그 할 수 있는 테이블 만들기, 테이블 셀 드래그 앤 드롭

See the Pen Untitled by Junho Yoon (@junhoyoon95) on CodePen.

1. Bootstrap 을 CDN 으로 가져와 스타일링을 했고

2. Sortable 이라는 CDN 으로 테이블의 아이템을 드래그앤드랍으로 이동시킬 수 있도록 구현

3. 나눈 채로 저장을 하려면
   

// Get all items in Picked Zone
const pickedItems = Array.from(pickedZone.querySelectorAll('.draggable-item')).map(item =>
    item.dataset.id
);

// Get all items in List Zone
const listItems = Array.from(listZone.querySelectorAll('.draggable-item')).map(item =>
    item.dataset.id
);

// Get all items in Delete Zone
const deleteItems = Array.from(deleteZone.querySelectorAll('.draggable-item')).map(item =>
    item.dataset.id
);

 이렇게 배열들에 넣고, pickedItems, listItems, deleteItems 에 담긴 id 들을 controller 로 넘기면 되겠습니다