홈페이지>웹 디자인 튜토리얼>HTML 튜토리얼

HTML5의 자세한 설명 및 인스턴스 코드

저자：Eve Cole 업데이트 시간：2025-02-04 12:24:01
간단한 소개

드래그 앤 드롭은 일반적인 기능, 즉 캡처 객체 후에 다른 위치로 드래그합니다.

HTML5에서 드래그 앤 드롭은 표준 부분이며 모든 요소를 ​​드래그 및 떨어 뜨릴 수 있습니다.

먼저 작은 예제를 클릭하십시오 : 사용자가 <p> 요소를 끌기 시작하면 JavaScript를 실행합니다.

 <p draggable = true ondragstart = myFunction (이벤트)> 드래그>

팁 : 링크와 사진은 기본적으로 드래그되며 드래그 가능한 속성이 필요하지 않습니다.

정의 및 사용법

드래그 앤 드롭 프로세스 중에 다음 이벤트가 트리거됩니다.

  • 이벤트 트리거 (소스 요소) : ondragStart -user- 사용자가 요소를 드래그하기 시작하면
    • ondrag -요소는 드래그 할 때 트리거됩니다
    • Ondragend -user 완료 요소 드래그 트리거
  • 대상을 해제 할 때 트리거 된 이벤트 : Ondragenter- 마우스에 의해 드래그 된 물체가 컨테이너로 들어가면이 이벤트가 트리거됩니다.
    • ONDRAGOVER- 드래그 된 객체가 다른 객체 컨테이너의 범위 내에서 드래그되면이 사건을 트리거합니다.
    • Ondragleave- 마우스에 의해 드래그 된 물체가 컨테이너를 떠날 때이 사건을 트리거합니다.
    • ONDROP -DRAR, 마우스 키를 릴리스 할 때이 이벤트를 트리거합니다.
브라우저 지원

Internet Explorer 9+, Firefox, Opera, Chrome 및 Safari 지원 드래그.

참고 : Safari 5.1.2는 드래그 요소를 지원하지 않습니다.

사례

먼저 코드를 게시 한 다음 하나씩 설명하십시오.

 <! 테두리 : 1px Solid #AAAAAA;} </style> </head> <body> <p> 직사각형 상자로 IMG_W3SLOGO.gif 사진을 드래그 : </p> <div id = div1 ondrop = drop (event) ondragover = allowdrop (t)> </div> <br> <img id = drag1 src = images/img_w3slogo = true ondragstatatrt = drag (이벤트) 너비 = 300 높이 = 56> <cript> 함수 al lowdrop (ev) { ev.preventDefalt ();} 함수 드래그 (ev) {ev.datatransfer.setData (text, ev.target.id);} 함수 drop (ev.preventDefault (); ;

드래그 전 페이지의 효과는 다음과 같습니다.

아래 코드의 의미를 분석 해 봅시다.

설정 요소를 드래그 및 떨어 뜨릴 수 있습니다

우선, 요소를 드래그하기 위해 드래그 가능한 속성을 true로 설정하십시오.

 <img draggable = true>
드래그 드래그 스테이트 및 setData ()

그런 다음 요소가 드래그 될 때 발생하는 일이 지정됩니다.

위의 예에서, OnDragStart 속성은 DRACDED 데이터를 지정하는 함수, DRAR (이벤트)을 호출합니다.

datatransfer.setData () 메소드 설정 데이터 드래그 데이터의 데이터 유형과 값을 설정합니다.

 함수 드래그 (EV) {ev.datatransfer.setData (Text, ev.target.id);}

이 예에서는 데이터 유형이 텍스트이고 값은 요소를 드래그 할 수있는 id (drag1)입니다.

it-ondragover를 넣을 위치

OnDragover 이벤트는 드래그 된 데이터를 배치 할 위치를 규정합니다.

기본값, 데이터/요소는 다른 요소에 배치 할 수 없습니다. 허용 가능한 배치를 설정 해야하는 경우 요소의 기본 처리를 방지해야합니다.

ondragover 이벤트의 이벤트를 호출하는 것입니다. :) :

 event.preventDefault ()
퍼팅-론

드래그 데이터가 배치되면 드롭 이벤트가 발생합니다.

위의 예에서 ondrop 속성은 함수, drop (이벤트)을 호출합니다.

 함수 드롭 (ev) {ev.preventDefault ();

코드 설명 :

  • 데이터의 브라우저의 기본 처리를 피하려면 extenceDefault ()에 전화하십시오 (드롭 이벤트의 기본 동작이 링크에서 열립니다).
  • datatransfer.getData (텍스트) 메소드를 통해 드래그 된 데이터를 가져옵니다. 이 메소드는 setData () 메소드에서 동일한 유형의 모든 데이터로 돌아갑니다.
  • 드래그 데이터는 드래그 요소의 ID입니다 (drag1)
  • 배치 요소에 대한 추가 드래그 요소 (대상 요소)

구현의 결과는 그림과 같습니다.

Datatransfer 객체

드래그 작업 중에 Datatransfer 객체를 사용하여 드래그 작업이 끝날 때 데이터에서 다른 작업을 수행하기 위해 데이터를 전송할 수 있습니다.

객체 속성 :

  • DROPEFFECT : 드래그 앤 드롭 대상에서 발생하는 드래그 앤 드롭 동작을 설정하거나 반환합니다. 여기에 설정된 드래그 앤 드롭 동작이 더 이상 효과적인 속성 속성 설정에 의해 설정된 다양한 드래그 앤 드롭 동작 설정 내에 있지 않으면 드래그 앤 드롭 작업이 실패합니다. 이 속성 값은 NULL, COPY, LINK 및 MOVE의 네 가지 값 중 하나 일뿐입니다.
  • 효과가 발달 : 드래그 요소가 허용하는 드래그 동작을 설정 또는 반환합니다. 이 속성 값은 없음, 복사, Copylink, CopyMove, Link, LinkMove, Move, All 및 Initialized로 설정할 수 있습니다.
  • 항목 :이 속성은 DATATRANSFERITEMS 객체를 반환하며 드래그 데이터를 나타냅니다.
  • 유형 :이 속성은 DATATRANSFER의 데이터에 저장된 모든 유형의 데이터를 포함하는 DOMStringList 객체를 반환합니다.
객체 방법 :

  • setData (형식, 데이터) : 지정된 형식으로 데이터를 datatransfer 객체에 할당합니다.
  • getData (형식) : DataTransfer 객체에서 지정된 형식으로 데이터를 가져옵니다. 형식은 데이터 형식을 나타내며 데이터는 데이터입니다.
  • CLEARDATA ([format]) : 지정된 형식의 데이터를 DataTransfer 객체에서 삭제합니다.
  • AddElement (요소) : 사용자 정의 아이콘을 추가합니다
  • SetDragimage (요소, x, y) : 드래그 앤 드롭 작업의 사용자 정의 아이콘을 설정하십시오. 그중에서도 요소는 사용자 정의 아이콘을 설정하고 X는 아이콘과 마우스 사이의 거리를 가로 방향으로 설정하고 아이콘과 마우스 사이의 거리는 수직 방향으로 설정합니다.
grawgable을 식별하십시오

 함수 dragstart_handler (EV) {console.log (dragstart); // 데이터 전송 객체에 추가 = p1 draggable = true ondragstart = dragstart_handler (이벤트);
드래그의 데이터를 정의합니다

 함수 dragstart_handler (EV) {// 드래그 데이터 추가 ev.datatransfer.setData (text/plain, ev.target.id); ;
드래그 이미지를 정의하십시오

 함수 DragStart_handler (EV) {// 이미지를 작성한 다음 기존 이미지로 변경하면 기본 드래그 이미지가 사용됩니다 (); img.rc = 'exp.gif';
드래그 효과를 정의하십시오

 함수 DragStart_handler (EV) {// DROPETRANSFER.DROPEFFECT = COPY;} 복사하기 위해 드래그 효과를 설정합니다.
드롭 존을 정의하십시오

 함수 dragover_handler (ev) {ev.preventDefault (); 대상의 Domine Data = Ev.datatransfer.getData (ev.target.appendChild); div> </body>
Firefox 브라우저 드래그 문제

그러나 여기로 가서 Firefox 브라우저에서 문제를 찾으십시오.

HTML5의 드래그는 PERVERDEFAULT를 사용하여 POP -UP 페이지가 나타나는 것을 방지하지만 Firefox에서는 작동하지 않습니까?

해결책:

 body.ondRop = function (event) {event.preventDefault ();

또는 위의 예에서는 Ondrop 메소드에 추가 할 수도 있습니다.

 함수 (EV) {EV.PreventDefault ();

위는이 기사의 모든 내용입니다.

관련 기사