[해피CGI][cgimall] 모바일 우선 드래그 앤 드롭 방식의 목록 순서 변경 도구 – picknplace.js

picknplace.js는 기존의 드래그 앤 드롭 방식을 두 단계 선택 및 배치 상호 작용 패턴으로 대체하는 JavaScript 라이브러리입니다.
 

표준 HTML5 드래그 앤 드롭 API는 모바일 기기 에서 제어하기가 매우 어렵다는 단점이 있습니다 . 항목을 이동하려다가 실수로 페이지를 스크롤하는 경우가 종종 발생합니다.
 

Picknplace.js는 상호작용 모델을 변경하여 이 문제를 해결합니다. 사용자는 먼저 항목을 "선택"(잠금)하고, 원하는 위치로 스크롤하거나 이동한 다음 "배치"합니다. 이렇게 하면 의도적인 조작이 보장되고 UI가 실수로 이동하는 것을 방지할 수 있습니다.

라이센스는 MIT 입니다. 


 

 

# 특징

• 2단계 상호작용 모델 : 선택과 배치를 분리합니다.
• 시각적 피드백 : 아이템 선택 모드 동안 가상 요소를 생성하여 사용자가 아이템이 배치될 정확한 위치를 확인할 수 있도록 합니다.
• 스크롤 인식 위치 지정 : 스크롤 중에 고스트 요소의 위치를 ​​자동으로 조정합니다.
• 사용자 정의 가능한 선택기 : 클래스 이름 및 DOM 선택기를 구성할 수 있습니다.
• 키보드 지원 : 접근성을 위해 Enter 및 Escape 키 처리기가 포함되어 있습니다.
• 상태 관리 패턴 : 예측 가능한 상태 전환을 위해 리듀서 기반 접근 방식을 사용합니다.

 

 

# 사용 사례

• 모바일 작업 관리  앱 : 스마트폰에서 우선순위 목록 순서 변경하기.
• 전자상거래 상품 주문 : 위시리스트 또는 장바구니 우선순위에 따라 상품을 정렬합니다.
• 대시보드 위젯 배치 : 태블릿에서 대시보드 레이아웃을 사용자 지정합니다.
• 콘텐츠 관리 시스템 : 관리자 패널에서 기사, 이미지 또는 메뉴 항목의 순서를 변경할 수 있습니다.

 

 

 

#작동 방식

• 선택 버튼을 클릭하면 선택 모드로 들어갑니다. 가상 요소와 복제된 목록 오버레이가 생성됩니다.
• '배치' 버튼을 클릭하세요 . 새 위치를 확정하고 DOM 요소를 시각적 레이아웃에 맞게 재정렬합니다.
• 취소 버튼을 클릭하세요 . 선택 모드가 종료됩니다. 모든 위치 변경 사항이 취소되고 시각적 오버레이가 제거됩니다.
• Enter 키 누르기 : 선택 모드에서 배치를 확인합니다. 배치 버튼을 클릭하는 것과 동일한 기능을 합니다.
• Esc 키 누르기 : 선택 모드에서 작업을 취소합니다. 취소 버튼을 클릭하는 것과 동일한 기능을 합니다.
• 스크롤 이벤트 : 선택 모드 동안 고스트 요소의 위치를 ​​업데이트합니다. 목록 항목과의 적절한 시각적 정렬을 유지합니다.

# 참고

첨부된 파일은 로컬에서 구동되지 않습니다. (CORS policy) 
반드시 서버에 업로드해서 확인해야 합니다. 

설치 방법 및 옵션, 이벤트 등에 대한 정보는 https://www.cssscript.com/drag-drop-alternative-picknplace/ 에서 확인 가능합니다.