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

黄舟
풀어 주다: 2017-03-11 15:58:27
원래의
1796명이 탐색했습니다.

사실 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(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);
    로그인 후 복사

  • 대상 요소

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

dragenter

dragover

  • dragleave

  • drop

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

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

    source.ondragstart = function(){
      console.log(&#39;开始拖拽&#39;);
    }source.ondrag = function(){
      console.log(&#39;拖拽中&#39;);
    }source.ondragend = function(){
      console.log(&#39;拖拽结束&#39;);
    }
    로그인 후 복사

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


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

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

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

를 취소하는 한 대상 요소의 이벤트가 발생하면 문제가 해결됩니다
target.ondragenter = function(){
  console.log(&#39;拖动进入目标元素&#39;);
}target.ondragover = function(){
  console.log(&#39;目标元素中拖拽&#39;);
}target.ondragleave = function(){
  console.log(&#39;拖动离开目标元素&#39;);
}target.ondrop = function(){
  console.log(&#39;拖放&#39;);
}
로그인 후 복사

데이터 교환

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

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

dataTransfer


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

target.ondragover = function(e){
  console.log(&#39;目标元素中拖拽&#39;);
  e.preventDefault(); //增}
로그인 후 복사

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

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

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

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

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

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

event.dataTransfer.setData(&#39;text&#39;,&#39;some text&#39;);
var text = event.dataTransfer.getData(&#39;text&#39;);//保存在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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!