HTML5 Javascript API 확장 4에 대한 Raid - 드래그/드롭 개요_html5 튜토리얼 팁
- WBOY원래의
- 2016-05-16 15:49:591426검색
드래그/드롭은 매우 일반적인 기능입니다. 개체를 잡고 배치하려는 영역으로 끌 수 있습니다. 많은 자바스크립트는 jQueryUI의 드래그 앤 드롭 구성 요소와 같은 유사한 기능을 구현합니다. HTML5에서는 드래그 앤 드롭이 표준 작업이 되었으며 모든 요소에서 지원됩니다. 이 기능은 매우 일반적이기 때문에 모든 주요 브라우저에서 이 작업을 지원합니다.
드래그 가능 속성 활성화
아래와 같이 요소의 드래그 속성을 드래그 가능으로 변경하기만 하면 됩니다.
코드 복사
코드는 다음과 같습니다.드래그하는 동안 데이터 전송
드래그하는 동안 변환 프로세스를 완료하기 위해 해당 논리 데이터를 전송해야 하는 경우가 많습니다. 여기서는 주로 dataTransfer 개체를 사용합니다. 데이터 전송을 위해 해당 멤버를 살펴보겠습니다.
메서드 멤버:
코드 복사
코드는 다음과 같습니다.setData(format,data): 드래그한 데이터를 dataTransfer 개체에 할당합니다.
형식: 드래그되는 데이터 유형을 지정하는 문자열 매개변수. 이 매개변수의 값은 "Text"(텍스트 유형) 및 "URL"(URL 유형)일 수 있습니다. 이 매개변수는 대소문자 독립적이므로 "text"와 "Text"를 전달하는 것은 동일합니다.
data: 드래그된 데이터를 지정하는 변형 유형 매개변수입니다. 데이터는 텍스트, 이미지 경로, URL 등이 될 수 있습니다.
이 함수에는 부울 반환 값이 있습니다. true는 데이터가 dataTransfer에 성공적으로 추가되었음을 의미하고 false는 실패를 의미합니다. 필요한 경우 이 매개변수를 사용하여 특정 논리를 계속 실행해야 하는지 여부를 결정할 수 있습니다.
코드 복사
코드는 다음과 같습니다. getData(format): Get dataTransfer 드래그 데이터에 저장된 데이터.
format의 의미는 setData와 동일하며 값은 "Text"(텍스트 유형) 및 "URL"(URL 유형)일 수 있습니다.
코드 복사
코드는 다음과 같습니다.clearData(형식): 제거 지정된 유형 데이터.
위에서 지정할 수 있는 "텍스트"(텍스트 유형) 및 "URL"(URL 유형) 외에도 여기서 형식은 다음 값을 사용할 수도 있습니다: 파일-파일, html- html 요소, 이미지 -그림.
이 방법을 사용하면 드래그된 데이터 유형을 선택적으로 처리할 수 있습니다.
속성 멤버:
코드 복사
코드는 다음과 같습니다.effectAllowed: 데이터 소스 요소의 데이터로 수행할 수 있는 작업을 설정하거나 가져옵니다.
속성 유형은 문자열이며, 값 범위는
"복사"-데이터 복사
"링크"-링크
"이동"-입니다. 데이터 이동
"copyLink"-대상 개체에 따라 결정되는 데이터를 복사하거나 연결합니다.
"copyMove"-대상 개체에 따라 결정되는 데이터를 복사하거나 이동합니다.
"linkMove" - 대상 개체에 따라 데이터를 연결하거나 이동합니다.
"all" - 모든 작업이 지원됩니다.
"없음"-드래그를 비활성화합니다.
"초기화되지 않음" - 기본값, 기본 동작을 채택합니다.
effectAllowed를 없음으로 설정한 후에는 드래그가 금지되지만 마우스 모양은 여전히 드래그 가능한 개체의 모양을 표시합니다. 이 마우스 모양을 표시하지 않으려면 창 이벤트 이벤트의 returnValue 속성을 설정해야 합니다. 거짓으로.
코드 복사
코드는 다음과 같습니다.dropEffect: 설정 또는 가져오기 드래그 대상 및 관련 마우스 모양에 허용되는 작업입니다.
속성 종류는 문자열이며, 값의 범위는 다음과 같습니다:
"복사" - 복사할 때 마우스가 모양으로 표시됩니다.
"링크" - 마우스가 나타납니다. 연결된 모양으로 표시됩니다.
"move" - 마우스가 움직이는 모양으로 나타납니다.
"none"(기본값) - 마우스가 드래그하지 않고 모양으로 나타납니다.
effectAllowed는 데이터 소스에서 지원하는 작업을 지정하므로 일반적으로 ondragstart 이벤트에 지정됩니다. dropEffect는 드래그 앤 드롭 대상에서 지원되는 작업을 지정하므로 effectAllowed와 함께 일반적으로 드래그 대상의 ondragenter, ondragover 및 ondrop 이벤트에 사용됩니다.
코드 복사
코드는 다음과 같습니다.파일 목록을 반환합니다. 파일을 FileList로 드래그했습니다.
유형: ondragstart에서 전송된 데이터(드래그된 데이터) 유형 목록입니다.
dataTransfer 객체가 존재하면 드래그된 데이터 소스와 대상 요소 간에 논리적 데이터 전송이 가능해집니다. 일반적으로 setData 메소드를 사용하여 데이터 소스 요소의 ondragstart 이벤트에 데이터를 제공한 다음 getData 메소드를 사용하여 대상 요소의 데이터를 가져옵니다.
드래그 중에 발생하는 이벤트
다음은 드래그 중에 발생하는 이벤트입니다. 기본적으로 이벤트가 발생하는 순서는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.dragstart: 드래그할 요소가 드래그되기 시작할 때 발생하는 이벤트입니다. 개체는 드래그 앤 드롭 요소입니다.
드래그: 요소가 드래그될 때 트리거됩니다. 이 이벤트 개체는 드래그된 요소입니다.
dragenter: 드래그 요소가 대상 요소에 들어갈 때 트리거됩니다. 이 이벤트 개체는 대상 요소입니다.
dragover: 대상 요소에서 요소를 드래그하여 이동할 때 트리거됩니다. 이 이벤트 객체는 대상 요소입니다.
dragleave: 요소가 대상 요소에서 멀리 드래그될 때 트리거됩니다. 이 이벤트 개체는 대상 요소입니다.
drop: 드래그된 요소가 대상 요소 내에 배치될 때 트리거됩니다. 이 이벤트 개체는 대상 요소입니다.
dragend: 드롭 후 트리거됩니다. 즉, 드래그가 완료되면 트리거됩니다. 이 이벤트 객체는 드래그된 요소입니다.
기본적으로 이벤트의 이벤트 매개변수는 관련 요소에 전달되며 쉽게 수정할 수 있습니다. 여기서는 모든 이벤트를 처리할 필요가 없으며 일반적으로 메인 이벤트만 연결하면 됩니다.
드래그 시작-드래그 시작 이벤트
이 이벤트에서 전달된 매개변수에는 드래그된 요소(event.Target)를 쉽게 얻을 수 있는 매우 풍부한 정보가 포함되어 있습니다. (event.dataTransfer.setData); 드래그 뒤에 있는 논리를 쉽게 구현할 수 있습니다(물론 바인딩할 때 다른 매개변수를 전달할 수도 있습니다).
드래그 프로세스 중 - ondrag, ondragover, ondragenter 및 ondragleave 이벤트
ondrag 이벤트의 개체는 드래그된 요소이며 일반적으로 이 이벤트는 덜 자주 처리됩니다. ondragenter 이벤트는 드래그가 현재 요소에 들어갈 때 발생하고, ondragleave 이벤트는 드래그가 현재 요소를 떠날 때 발생하며, ondragover 이벤트는 드래그가 현재 요소 내에서 이동할 때 발생합니다.
여기서 한 가지만 주의하면 됩니다. 기본적으로 브라우저는 요소 삭제를 금지하므로 요소 삭제를 허용하려면 이 함수에서 false를 반환하거나 event.preventDefault를 호출해야 합니다. () 방법. 아래 예와 같습니다.
Drag end-ondrop, ondragend 이벤트
드래그 가능한 데이터를 드롭하면 드롭 이벤트가 발생합니다. 드롭이 완료된 후 dragend 이벤트가 발생하는데, 이 이벤트는 비교적 거의 사용되지 않습니다.
간단한 예를 보세요:
코드 복사
코드는 다음과 같습니다. }
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id)
}
functiondrop(ev){
vardata=ev .dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault()}
< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
;