문제 상황

sortable 이벤트 중, 드래그 앤 드롭 동작 후 요소 순서를 기반으로 데이터를 업데이트하려고 했음.

요소 드롭 시 Event 객체에서 아래의 인덱스를 뽑아와서 시도했으나, 원래 자리값이 아닌 이상한 값을 반환하였음.

"분명 인덱스 2에서 1로 이동했는데 왜 3에서 1로 이동했다고 뜨는거지?"

DOM에 접근하여 순서를 읽고자 했으나 이도 이상하여 렌더링된 HTML를 다시 확인해보니

불필요한 요소(draggable--original, draggable-mirror)가 생성되어 DOM에 추가로 포함되었음.

드래깅 이벤트는 드래깅 하는 도중에 동작을 감지하기 때문에 -mirror 클래스가 붙은 요소까지 추가로 생성한다.

아무튼 Draggable에서 드래그 시 자동으로 생성하여 상태를 관리하려는 것으로 보여서 우회할 수 있는 방법을 고민.

아래와 같은 처리를 하여 세션을 업데이트 하였음.

// 컨테이너 내의 모든 자식 요소 중 특정 클래스가 없는 요소만 필터링

const mainContainerChildren = Array.from(container.children)

    .filter(el => !el.classList.contains('draggable--original')

                && !el.classList.contains('draggable-mirror'));