드래그앤드랍 예제

이 이벤트는 드래그가 발생하는 동안 마우스가 요소를 떠날 때 발생합니다. 리스너는 드롭 피드백에 사용되는 강조 표시 또는 삽입 마커를 제거해야 합니다. 화면의 각 컨테이너에 대해 드래그, 드래그 앤 드 런 온에 놓는 요소에 대한 eventListener를 추가합니다. 이전 예제에서는 공을 “어디서나” 떨어뜨릴 수 있습니다. 실제 생활에서 우리는 일반적으로 하나의 요소를 가지고 다른 에 드롭. 예를 들어 폴더에 있는 파일이나 휴지통에 있는 사용자 이제 HTML 5는 브라우저에 기본 DnD 지원을 제공하여 코딩하기가 훨씬 쉬워지도록 드래그 앤 드롭 (DnD) API를 마련했습니다. 데이터를 다시 정렬하는 기능은 드래그의 주요 용도입니다. 이 캘린더 예제에서는 UI를 사용하여 특정 날짜에 이벤트를 배치하고 필요한 경우 날짜 간에 전환하는 방법을 보여 주며 있습니다. 드래그 앤 드롭을 구현하는 것이 일반적인 작업에서 문제점을 어떻게 활용할 수 있는지 보여줍니다. HTML5에 자체 드래그 앤 드롭 API가 있다는 것을 알고 계셨습니까? 나는 단서가 없었기 때문에 나는 단지 물었다. 여기, 그것은 사각형의 교환을 사용 하기 위해 몇 가지 자바 스크립트와 결합.

이는 간단한 예이지만 API를 탭할 수 있는 가능성을 보여 주며, 이는 다음과 같은 예입니다. 전체 드래그 앤 드롭 프로세스를 모니터링하기 위해 첨부할 여러 가지 이벤트가 있습니다: HTML5에서는 드래그 앤 드롭이 표준의 일부입니다: 모든 요소를 드래그할 수 있습니다. 그들은 쉽게 간단한 작업을 해결할 수 있기 때문에 그들은 재미있다, 또한 브라우저에 “외부”파일의 drag`n`drop을 처리 할 수 있습니다. 그래서 우리는 OS 파일 관리자에서 파일을 가져 와서 브라우저 창에 드롭 할 수 있습니다. 그런 다음 자바 스크립트는 그 내용에 액세스 할 수 있습니다. 마지막 함수는 이전에 선언한 “box” 요소를 “this”로 더해 주며, 이 시점에서 삭제되는 컨테이너를 나타냅니다. 클래식 스위처루. 한 요소를 다른 요소 위로 드래그하여 DOM에서 거래 장소를 관찰합니다.

레이아웃 크기를 유지해야 하는 경우에 이상적인 기능입니다. 드래그오버 및 드래그엔터 이벤트는 드롭 이 기능을 위해 기본 동작을 제거해야 하므로 해당 기능을 제거하기 위해 리스너로 사용해야 합니다. 이제 우리는 현재 “드롭 타겟”을 가지고, 우리는 전체 과정에서 변수 전류에 비행하고 강조 하거나 다른 물건을 하는 데 사용할 수 있습니다. 드래그 앤 드롭 작업의 다양한 단계에서 발생 되는 이벤트의 수가 있습니다. 이러한 이벤트는 아래에 나열되어 있습니다 – 아래의 예는 간단한 드래그 앤 드롭 예입니다 : 실제 드롭을 처리하려면 드롭 및 드래그 엔드 이벤트에 대한 이벤트 리스터를 추가합니다. 이 처리기에서는 일반적으로 성가신 리디렉션의 일종인 드롭에 대한 브라우저의 기본 동작을 방지해야 합니다. e.stopPropagation()을 호출하여 이벤트가 DOM을 부글부글 부글부글 올리는 것을 방지할 수 있습니다. 마지막으로 실제 드롭을 수행할 수 있는 드롭 이벤트가 있습니다.

코드를 실행하면 이상한 것을 알 수 있습니다. 드래그 앤 드롭의 시작 부분에, 공 “포크”: 우리는 그 “복제”를 드래그 시작합니다. 데스크톱에서 브라우저로 파일을 드래그하는 전체 가이드는 JavaScript에서 로컬 파일 읽기를 선택하기 위해 드래그 앤 드롭 사용을 참조하십시오.

02 August, 2019
Posted in Uncategorized

Author: wolff