찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5_html5 튜토리얼 기술에서 요소 드래그를 구현하는 방법

HTML5_html5 튜토리얼 기술에서 요소 드래그를 구현하는 방법

WBOY
WBOY원래의
2016-05-16 15:51:441622검색

아마도 많은 프런트엔드가 HTML5 드래그 앤 드롭을 구현하는 방법을 이해하지 못할 것입니다. 이 문서는 몇 가지 아이디어를 제공합니다. 나중에 쉽게 참조할 수 있도록 파일을 정리하고 백업하세요.

첫 번째 예:

index.html

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3. <머리>  
  4.     <메타 문자 집합="UTF- 8">  
  5.     <제목>드래그제목>  
  6.     <스타일>  
  7.         .box{   
  8.             폭: 400px;   
  9.             높이: 400px;   
  10.             플로트: 왼쪽;   
  11.         }   
  12.         #box1{   
  13.             배경: #CCC;   
  14.         }   
  15.         #box2{   
  16.             배경: #FF0;   
  17.         }   
  18.     스타일>  
  19. 머리>  
  20. <몸>  
  21. <div id="box1"  클래스="상자">div>  
  22. <div id="box2"  클래스="상자">div>  
  23. <img src="http: //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
JavaScript 코드复复内容到剪贴板
  1. "app1.js">   
  2.   
  3.   
  4.   
  5. app1.js   
  6. /** 
  7.  *   app1.js  
  8.  */  
  9.   
  10. var oBox1,   
  11.     oBox2,   
  12.     oImg1;   
  13.   
  14. window.onload = 함수(){   
  15.     oBox1 = document.getElementById('box1');   
  16.     oBox2 = document.getElementById('box2');   
  17.     oImg1 = document.getElementById('img1');   
  18.   
  19.     //   
  20.     oBox1.ondragover = oBox2.ondragover = 함수(e){   
  21.         e.preventDefault();   
  22.     };   
  23.   
  24.     //   
  25.     oImg1.ondragstart = 기능(e){   
  26.         e.dataTransfer.setData('text', e.target.id);   
  27.     };   
  28.   
  29.     oBox1.ondrop = dropImg;   
  30.     oBox2.ondrop = dropImg;   
  31. };   
  32.   
  33. 함수 dropImg(e){   
  34.     e.preventDefault();   
  35.     var tempImg = document.getElementById(e.dataTransfer.getData('text'));   
  36.     e.target.appendChild(tempImg);   
  37. }    

지식 포인트 관련

드래그 앤 드롭 프로세스 중에 다음 이벤트가 트리거됩니다.
드래그 대상(소스 요소)에서 이벤트 트리거
ondragstart - 사용자가 시작합니다. 요소 드래그
ondrag - 요소가 드래그될 때 트리거됨
ondragend - 사용자가 요소 드래그를 마친 후 트리거됨

대상이 해제될 때 트리거되는 이벤트
 ondragenter - 이 이벤트는 마우스로 드래그한 개체가 컨테이너 범위에 들어갈 때 트리거됩니다.
ondragover - 개체가 is dragged 이 이벤트는 드래그된 객체가 다른 객체의 컨테이너 범위 내에서 드래그될 때 트리거됩니다.
ondragleave - 이 이벤트는 마우스로 드래그하는 객체가 컨테이너 범위를 벗어날 때 트리거됩니다.
ondrop - 드래그 프로세스 중에 이 이벤트는 마우스 버튼을 놓을 때 트리거됩니다

이벤트 객체(e로 대체)

e.타겟

W3Cschool에 대한 설명은 다음과 같습니다. 이 이벤트를 트리거한 요소(이벤트의 대상 노드)를 반환합니다. 이 대상 속성은 ie9 이상에서만 호환됩니다.

e.preventDefault()

이벤트의 기본 동작을 취소합니다.

e.dataTransfer.setData()

드래그한 데이터의 데이터 유형 및 값 설정:

코드 복사
코드는 다음과 같습니다.
e.dataTransfer.setData("Text",ev.target.id); //첫 번째 매개변수는 Text입니다(소문자도 허용됨)

e.dataTransfer.getData()

드래그한 데이터 가져오기:

코드 복사
코드는 다음과 같습니다.
e.dataTransfer .getData("텍스트");

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

원문: http://www.cnblogs.com/oovwall/p/5213580.html

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5: 웹 표준의 가장 큰 도약_html5 튜토리얼 팁다음 기사：HTML5: 웹 표준의 가장 큰 도약_html5 튜토리얼 팁

관련 기사

더보기