JavaScript 드래그 앤 드롭 정렬은 확인란에 연결되어 있습니다. 확인란이 전환 된 후 재설정 정렬을 피하는 방법은 무엇입니까?

JavaScript 드래그 앤 드롭 정렬 및 확인란 상자 연결 : 정렬 안정성 유지 관리

이 기사는 일반적인 JavaScript 개발 문제를 해결합니다. 페이지 위의 확인란을 전환 한 후 정렬 된 태그의 순서를 변경하지 않은 방법.

문제 설명 : 이 프로그램은 레크스 박스 컨트롤 레이블 생성과 레이블의 드래그 앤 드롭 정렬 기능을 결합합니다. 그러나 사용자가 정렬하고 확인란을 다시 전환하면 정렬 결과가 손실됩니다.

문제 분석 : 근본 원인은 데이터 업데이트 메커니즘에 있습니다. 확인란을 전환 할 때 프로그램은 드래그 앤 드롭 작업을 통해 사용자가 결정한 정렬을 무시하면서 태그 데이터 배열을 재생할 수 있습니다. 단순히 map 메소드를 사용하면 데이터 만 맵핑하고 순서를 변경하지 않기 때문에이 문제는 해결되지 않습니다.

솔루션 : 키는 태그의 정렬 정보를 유지하는 것입니다. 우리는 두 가지 방법을 제안합니다.

방법 1 : 정렬 필드를 추가합니다

1. 정렬 위치를 기록하기 위해 각 레이블 데이터에 대한 sort 필드를 추가하십시오.
2. 드래그 및 정렬시 sort 필드의 값을 업데이트하십시오.
3. 확인란을 전환 할 때 sort 필드에 따라 데이터 배열을 정렬하여 이전 정렬을 복원합니다. 이렇게하면 작업에 관계없이 데이터가 sort 필드에 의해 정렬되도록합니다.

방법 2 : push 및 splice 작업을 사용하십시오

1. 확인란을 전환 할 때는 map 으로 전체 배열을 재생하지 마십시오.
2. 확인란이 선택되면 push 방법을 사용하여 레이블 데이터를 추가하십시오. 확인되지 않은 경우 splice 방법을 사용하여 데이터를 제거하십시오.
3. 추가 및 제거 작업에서 sort 필드에 레이블 순서가 올바르게 반영되어 있는지 확인하십시오. 이 접근법은 데이터 재구성을 피하므로 정렬을 보존합니다.

위의 방법을 통해 체크 박스 스위칭으로 인한 정렬 재설정을 효과적으로 방지하고 예상 기능을 달성 할 수 있습니다. 선택할 방법은 프로젝트의 특정 상황과 코드 구조에 따라 다릅니다. 방법 1은 더 간결하고 방법 2는 경우에 따라 더 유연 할 수 있습니다.

위 내용은 JavaScript 드래그 앤 드롭 정렬은 확인란에 연결되어 있습니다. 확인란이 전환 된 후 재설정 정렬을 피하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!