드래그 앤 드롭으로 웹 사이트에 드래그 & 드롭 추가하기

무료로 도서관을 찾고 있습니다. 드래그 앤 드롭 기능 처리? 그때 Dragula 필요한 유일한 리소스입니다..

이 무료 스크립트를 사용하면 페이지의 모든 요소에 드래그 앤 드롭 기능 추가. 여기에는 React & AngularJS 프레임 워크, 바닐라 자바 ​​스크립트.

Dragula는 설정이 쉽고 제공됩니다. 사용자 행동을위한 맞춤 트리거 모음. 즉, 사용자가 항목을 끌거나 항목을 클릭하거나 페이지의 일부를 다시 정렬 한 후에 사용자 고유의 기능을 실행할 수 있습니다..

라이브 데모를 들여다 보면 알 수 있습니다. 몇 가지 코드 스 니펫, 와 함께 사용 가능한 샘플.

Dragula 설정 단일 JavaScript 파일 만 필요합니다. 그것을 작동 시키려면. 추가 옵션을 사용하면 다소 혼란 스러울 수 있습니다..

예를 들어 두 개의 컨테이너가 있다고 가정 해 보겠습니다., #왼쪽 과 #권리, 드래그 가능한 항목을 지원하려고합니다. 너는 ~해야 할거야. Dragula 함수에 이러한 컨테이너를 수동으로 추가하십시오. 끌어서 놓기 방법을 지원하는 방법.

프론트 엔드 개발의 기본 사항을 확실하게 파악하지 못했다면 Dragula를 사용하는 데 어려움을 겪을 것입니다. 하지만 GitHub 레포에는 따라 할 수있는 훌륭한 사례 심지어 복사 할 수있는 코드 스 니펫.

다음은 GitHub 문서의 샘플입니다. 2 개의 (왼쪽 및 오른쪽) 컨테이너를 목표로 삼는다.:

 dragula ([document.querySelector ( '# left'), document.querySelector ( '# right')]); 

참고할 GitHub 페이지를 더 살펴보면 거대한 옵션 목록 이 함수에 전달할 수 있습니다..

선택할 수 있습니다. 항목 복사 또는 이동 여부, 드래그 한 항목을 지원하는 컨테이너 심지어 콜백 함수 다음과 같은 다양한 사용자 동작을 통해 작동합니다.

• 컨테이너 위에 올려 놓기
• 이벤트의 초기 클릭 및 드래그
• 이벤트 삭제
• 범위를 벗어나는 요소 삭제
• 드래그하여 요소 / 컨테이너 복제

이 라이브러리 초기 작업을 할 것입니다. 하지만 자바 스크립트에 익숙하다면 아무리 생각해 봐야합니다..

데모 페이지를 그것이 어떻게 작동하는지 보아라. ~까지 몇 가지 코드 샘플 아이디어 얻기. Dragula는 대규모 라이브러리이며 아마도 오픈 소스 스크립트 중 가장 뛰어난 스크립트 일 것입니다. 가장 넓은 범위의 사용자 지정으로 드래그 앤 드롭을 처리합니다..