HTML5 요소 드래그 앤 드롭(그림 및 텍스트) 관련 API에 대한 자세한 소개

사실 HTML5에는 몇 가지 유용한 API가 추가되어
더 쉽게 개발할 수 있도록
비즈니스 로직에 더 집중할 수 있습니다.
이러한 API의 사용도 매우 간단합니다
하지만 저는 기억력이 좋지 않아서
블로그 형식으로 기록합니다(설명서 웃기네요)
오늘은 이 드래그 앤 드롭 API에 대해 써보겠습니다

기본 드래그

드래그라고 하면 사실 드래그 앤 드롭 기능의 최초 구현은 IE(IE4)였습니다
H5는 IE 인스턴스를 기반으로 지정된 드래그 앤 드롭 사양입니다
브라우저에는 기본 드래그 앤 드롭이 있습니다
예를 들어 사진 드래그

선택한 텍스트 드래그

링크 드래그

요소 드래그

브라우저에서는 기본적으로 이미지, 텍스트 및 링크를 드래그할 수 있습니다.
다른 요소도 드래그할 수 있습니다.
요소 태그에만 추가 속성

<p draggable="true"></p>

이 요소를 드래그하면 브라우저는 이를 반투명 복사본으로 표시합니다

드래그 이벤트

드래그 이벤트는 두 가지 범주로 나누어집니다. 🎜> 하나는 드래그 요소에 의해 트리거되는 이벤트
다른 하나는 드래그 앤 드롭 대상 요소에 의해 트리거되는 이벤트

<p id="source" draggable="true"></p><p id="target"></p>  <!-- 样式略 -->

rrree

드래그 요소

드래그 요소 드래그 요소가 다음 이벤트 >

• dragend

마우스가 요소를 클릭하고 이동하기 시작하면 dragstart 이벤트(mousedown과 유사) )가 트리거됩니다
• 드래그 프로세스 중에 드래그 이벤트가 계속 트리거됩니다(mousemove와 유사)

  드래그를 취소하기 위해 마우스를 놓을 때 dragend 이벤트가 트리거됩니다(mouseup과 유사)

  var source = document.getElementById('source');var target = document.getElementById('target');

• 대상 요소

  드래그된 요소를 대상 요소로 드래그하면 대상 요소가 다음 이벤트를 트리거합니다

dragenter

dragover

• dragleave

• drop

요소를 대상으로 드래그하면 dragenter 이벤트가 트리거됩니다(마우스 오버와 유사)
• 드래그된 요소가 대상 요소에 있으면 dragover 이벤트가 계속 발생합니다.

  대상 요소를 그대로 두고 dragleave 이벤트를 트리거합니다(mouseout과 유사). 요소를 대상 요소에 드래그 앤 드롭하면( 대상 요소에서 마우스를 놓으면 드롭 이벤트가 발생하지만 dragleave 이벤트는 발생하지 않습니다

  source.ondragstart = function(){
    console.log('开始拖拽');
  }source.ondrag = function(){
    console.log('拖拽中');
  }source.ondragend = function(){
    console.log('拖拽结束');
  }

• 이때 우리는 요소가 대상 요소로 드래그 앤 드롭되었습니다. 드롭 이벤트가 트리거되지 않았습니다.

특수 커서(원 + 백슬래시)가 표시되었습니다.
잘못된 것을 의미합니다. 드래그 앤 드롭
따라서 드롭 이벤트가 트리거되지 않습니다

즉, 기본적으로 요소를 드래그 앤 드롭할 수 없습니다

드래그 오버에서 기본 이벤트

를 취소하는 한 대상 요소의 이벤트가 발생하면 문제가 해결됩니다

---

target.ondragenter = function(){
  console.log('拖动进入目标元素');
}target.ondragover = function(){
  console.log('目标元素中拖拽');
}target.ondragleave = function(){
  console.log('拖动离开目标元素');
}target.ondrop = function(){
  console.log('拖放');
}

데이터 교환

간단한 드래그 앤 드롭만으로는 의미가 없습니다

데이터 교환을 수행해야 합니다이 용어의 목적 데이터 교환은 이벤트 객체의 속성입니다

dataTransfer

dataTransfer의 두 가지 핵심 메서드는 setData()와 getData()입니다.
setData()가 사용됩니다. 데이터를 설정하고 getData()를 사용하여 수신합니다. data

target.ondragover = function(e){
  console.log('目标元素中拖拽');
  e.preventDefault(); //增}

선택한 텍스트를 드래그하면 브라우저는 기본적으로 dataTransfer.setData를 호출하여 해당 텍스트 데이터를 설정합니다.

setData() 및 getData()는 문자열입니다. 데이터 유형

"텍스트" 텍스트 유형 외에도 IE에서 정의한 데이터 유형에는 "URL"도 포함됩니다.

H5는 이를 확장하여 다양한 MIME 유형을 지정할 수 있습니다

그러나 이전 버전과 호환되기 위해서는 "text" 및 "URL"을 지원합니다
각각 "text/plain" 및 "text/uri-list"에 매핑됩니다.
데이터가 URL로 저장되면 브라우저는 특수한 작업을 수행합니다. 처리하고 웹 링크로 취급합니다 (링크를 다른 브라우저 창으로 드래그하면 웹 페이지가 열립니다)

필요한 경우 전송해야 하는 데이터를 수동으로 저장할 수 있습니다

event.dataTransfer.setData('text','some text');
var text = event.dataTransfer.getData('text');//保存在dataTransfer中的数据只能在drop事件处理函数中处理

드래그 설정

dataTransfer

dropEffect

및
effectAllowed

---

dropEffect

dropEffect 속성 값은 드래그한 요소가 수행할 수 있는 배치 동작을 나타내는 문자열입니다.

이 속성을 사용하려면 dragenter 이벤트 핸들러 함수에서 설정해야 합니다.

없음 요소를 여기로 끌 수 없습니다(텍스트 상자를 제외한 모든 요소의 기본값)

move 대상으로 이동

타겟에 복사

링크 대상은 드래그 요소를 엽니다(드래그 요소는 링크여야 하며 URL이 있어야 함)

effectAllowed

effectAllowed 속성 값은 요소를 드래그하는 데 dropEffect가 허용되는 문자 문자열이기도 합니다.
이 속성을 사용하려면 dragst 이벤트 핸들러 함수에서 설정해야 합니다.

• 초기화되지 않음 드래그 및 드롭 동작이 설정됨

• 어떤 동작으로도 인해 발생할 수 없음

• 복사 dropEffect 값만 복사가 허용됨

• link dropEffect 값만 허용됩니다. link

• move는 dropEffect 값 이동만 허용

• copyLink는 dropEffect 값 복사를 허용합니다. 및 링크

• copyMove를 사용하면 dropEffect 값을 복사하고 이동할 수 있습니다

• linkMove를 사용하면 dropEffect 값을 링크하고 이동할 수 있습니다

• all은 모든 dropEffect를 허용합니다

위 내용은 HTML5 요소 드래그 앤 드롭(그림 및 텍스트) 관련 API에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!