javascript - 지능형 스냅 가이드로 드래그 앤 드롭

Question

현재 사용자가 애플리케이션 별 작업을위한 레이아웃을 디자인 할 수있는 위젯을 구축 중입니다. 그리고 나는 사용자들을 위해 파워 포인트/기조 연설 인터페이스 (a 280 slides)를 제공하고자한다. 그러나, 나는 또한 "스냅 가이드"(미안, 그들에게 설명 할 더 좋은 단어가 없다)를 제공하고 싶다. 이것은 기본적으로 사용자가 페이지의 여러 요소를 정렬하는 데 도움이된다.

이 예제는 Flash IDE에서 볼 수 있습니다. IDE를 드래그하면 주변 객체의 크기와 위치가 자동으로 계산되어 정렬됩니다. mockingbird 응용 프로그램 (https://gomockingbird.com/mockingbird/)은 비슷한 것을 구현합니다. 힌트 : 일부 객체를 드래그하여 객체를 경계 상자에 정렬하려고하는 안내가 있는지 확인하십시오.

뷰포트에 요소 배열을 캐싱하고 각 요소의 위치와 크기를 계산하여 가장 잘 맞는 스냅을 찾음으로써 비슷한 결과가 발생할 수 있다고 생각합니다. 그러나 끌리는 요소의 가장 높은 위치를 어떻게 계산합니까? 대체 솔루션이 있습니까?

더 나은 지식을 가진 분과 함께 계발하십시오! :)

Answer 1

이 작업을 수행하기 위해 이미 작성된 라이브러리를 사용하는 것이 좋습니다. 예를 들어, jQuery UI의 Draggable은 정확히 이것을 수행하며 사용자 정의가 가능합니다.