모바일 우선 드래그 앤 드롭 방식의 목록 순서 변경 도구

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 드레그엔드롭 > 모바일 우선 드래그 앤 드롭 방식의 목록 순서 변경 도구 – picknplace.js 상세정보

클라우드태그

javascript

HTML

PHP

2022

Api

CSS

웹메일

jquery

ASP

갤러리

mysql

모바일

mobile

현재접속자 명

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

해피팀

네티즌

소스분류

드레그엔드롭

다운로드 횟수

1 회

간단설명

모바일 친화적인 ‘선택 → 스크롤 → 배치’ 방식으로 기존 드래그앤드롭을 대체하는 JavaScript 정렬/배치 라이브러리입니다.

평가하기

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/ 에서 확인 가능합니다.