사실 HTML5에는 몇 가지 유용한 API가 추가되어
더 쉽게 개발할 수 있도록
비즈니스 로직에 더 집중할 수 있습니다.
이러한 API의 사용도 매우 간단합니다
하지만 저는 기억력이 좋지 않아서
블로그 형식으로 기록합니다(설명서 웃기네요)
오늘은 이 드래그 앤 드롭 API에 대해 써보겠습니다
드래그라고 하면 사실 드래그 앤 드롭 기능의 최초 구현은 IE(IE4)였습니다
H5는 IE 인스턴스를 기반으로 지정된 드래그 앤 드롭 사양입니다
브라우저에는 기본 드래그 앤 드롭이 있습니다
예를 들어 사진 드래그
선택한 텍스트 드래그
링크 드래그
브라우저에서는 기본적으로 이미지, 텍스트 및 링크를 드래그할 수 있습니다.
다른 요소도 드래그할 수 있습니다.
요소 태그에만 추가 속성
<p draggable="true"></p>
이 요소를 드래그하면 브라우저는 이를 반투명 복사본으로 표시합니다
드래그 이벤트는 두 가지 범주로 나누어집니다. 🎜> 하나는 드래그 요소에 의해 트리거되는 이벤트
다른 하나는 드래그 앤 드롭 대상 요소에 의해 트리거되는 이벤트
<p id="source" draggable="true"></p><p id="target"></p> <!-- 样式略 -->
드래그를 취소하기 위해 마우스를 놓을 때 dragend 이벤트가 트리거됩니다(mouseup과 유사) var source = document.getElementById('source');var target = document.getElementById('target');
드래그된 요소를 대상 요소로 드래그하면 대상 요소가 다음 이벤트를 트리거합니다
dragenter
대상 요소를 그대로 두고 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(); //增}
그러나 이전 버전과 호환되기 위해서는 "text" 및 "URL"을 지원합니다
각각 "text/plain" 및 "text/uri-list"에 매핑됩니다.
데이터가 URL로 저장되면 브라우저는 특수한 작업을 수행합니다. 처리하고 웹 링크로 취급합니다 (링크를 다른 브라우저 창으로 드래그하면 웹 페이지가 열립니다)
event.dataTransfer.setData('text','some text'); var text = event.dataTransfer.getData('text');//保存在dataTransfer中的数据只能在drop事件处理函数中处理
드래그 설정
dataTransfer
및
effectAllowed
이 속성을 사용하려면 dragenter 이벤트 핸들러 함수에서 설정해야 합니다.
없음 요소를 여기로 끌 수 없습니다(텍스트 상자를 제외한 모든 요소의 기본값)
move 대상으로 이동
링크 대상은 드래그 요소를 엽니다(드래그 요소는 링크여야 하며 URL이 있어야 함)
effectAllowed 속성 값은 요소를 드래그하는 데 dropEffect가 허용되는 문자 문자열이기도 합니다.
이 속성을 사용하려면 dragst 이벤트 핸들러 함수에서 설정해야 합니다.
초기화되지 않음 드래그 및 드롭 동작이 설정됨
어떤 동작으로도 인해 발생할 수 없음
복사 dropEffect 값만 복사가 허용됨
link dropEffect 값만 허용됩니다. link
move는 dropEffect 값 이동만 허용
copyLink는 dropEffect 값 복사를 허용합니다. 및 링크
copyMove를 사용하면 dropEffect 값을 복사하고 이동할 수 있습니다
linkMove를 사용하면 dropEffect 값을 링크하고 이동할 수 있습니다
all은 모든 dropEffect를 허용합니다
위 내용은 HTML5 요소 드래그 앤 드롭(그림 및 텍스트) 관련 API에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!