2 augusti, 2019 admin

드래그앤드롭 예제

데이터를 다시 정렬하는 기능은 드래그의 주요 용도입니다. 이 캘린더 예제에서는 UI를 사용하여 특정 날짜에 이벤트를 배치하고 필요한 경우 날짜 간에 전환하는 방법을 보여 주며 있습니다. 드래그 앤 드롭을 구현하는 것이 일반적인 작업에서 문제점을 어떻게 활용할 수 있는지 보여줍니다. 드래그가 발생하는 동안 마우스가 대상 요소 위로 처음 이동될 때 발생합니다. 이 이벤트에 대한 수신기는 이 위치에 대해 드롭이 허용되는지 여부를 표시해야 합니다. 리스너가 없거나 수신기가 작업을 수행하지 않는 경우 기본적으로 드롭이 허용되지 않습니다. 드래그 가능은 확장하기 쉽습니다. 필요한 기능을 제공하는 사용자 지정 모듈을 작성한 다음 검토를 위해 Github 리포지토리에 제출합니다. 아직 사용할 수 없는 기능이 필요한 경우 커뮤니티도 필요할 수 있습니다. 공유는 배려입니다. 드래그된 데이터가 삭제되면 드롭 이벤트가 발생합니다.

위의 예에서 대부분의 브라우저는 드래그되는 콘텐츠의 고스트 이미지를 만듭니다. 다른(특히 FF)에서는 끌기 작업에서 일부 데이터를 보내야 합니다. 다음 섹션에서는 끌어서 놓기 이벤트 모델을 처리하기 위해 리스너를 추가하여 열 예제를 더욱 흥미롭게 만듭니다. dataTransfer 속성은 모든 DnD 마법이 발생하는 곳입니다. 끌기 동작에서 전송된 데이터의 조각을 보유합니다. dataTransfer는 드래그 스타트 이벤트에서 설정되고 드롭 이벤트에서 읽기/처리됩니다. e.dataTransfer.setData(형식, 데이터)를 호출하면 개체의 콘텐츠가 마임형으로 설정되고 데이터 페이로드가 인수로 전달됩니다. 지금까지 자세히 따라왔다면 예제에서 예상대로 열을 삭제하지 않는 것을 알 수 있습니다. 데이터 전송 개체를 입력합니다. 놓기 이벤트는 끌기 작업이 끝날 때 드롭이 발생한 요소에서 발생합니다.

수신기는 드래그되는 데이터를 검색하고 놓기 위치에 삽입해야 합니다. 다음은 드래그 앤 드롭 작업을 구현하기 위해 수행 할 단계입니다 – 마지막 함수는 우리가 ”이”로 이전에 선언 한 ”상자”요소를 더합니다.이 시점에서 드롭되는 컨테이너를 의미합니다. 위의 예에서 공은 항상 이동, 그것은 포인터 아래에 있다: 현대 운영 체제의 인터페이스에서 더 만족 스러운 경험 중 하나는 드래그 앤 드롭. 그것은 믿을 수 없을만큼 직관적이고 매우 매끄러운 보인다. onMouseMove의 확장 된 코드는 ”드롭 가능” 요소를 찾을 수 있습니다: 여기 는 드래그 앤 드롭에 대 한 알고리즘공의 드롭: 바탕 화면에서 브라우저로 파일을 드래그하는 전체 가이드에 대 한 참조 드래그 앤 드롭 자바 스크립트에서 로컬 파일 읽기에서 선택에 대 한 선택하기 위해 드래그 앤 드롭 을 사용 하 여. 클래식 스위처루. 한 요소를 다른 요소 위로 드래그하여 DOM에서 거래 장소를 관찰합니다. 레이아웃 크기를 유지해야 하는 경우에 이상적인 기능입니다. 다음은 기본 사항입니다. 예를 들어 드롭 가능한 요소(드롭에 사용 가능)를 강조 표시하여 이를 확장할 수 있습니다.

기본 Drag`n`Drop 알고리즘은 다음과 같습니다: 드래그 앤 드롭은 매우 일반적인 기능입니다.