드래그 앤 드롭 API는 다른 새로운 기능에 비해 실제 개발에서 중요성이 60%, 사용량이 30%에 불과합니다.
2. 드래그 앤 릴리스란 무엇입니까?드래그: 드래그
출시: 드롭
드래그는 마우스가 소스 객체를 클릭하고 놓지 않고 객체를 계속 움직이는 것을 의미합니다.
3. 원본 개체와 대상 개체는 무엇입니까?소스 개체: 마우스로 클릭하는 항목을 말하며 그림, DIV, 텍스트 등이 될 수 있습니다.
대상 개체: 원본 개체를 드래그하여 영역으로 이동하는 경우를 나타냅니다. 원본 개체가 이 영역에 들어가서(놓지 않고) 이 영역 위로 마우스를 가져간 다음 여기에서 원본 개체를 놓습니다(이미 놓음). 호버링 후 해당 지역을 떠날 수도 있습니다.
4. 드래그 앤 드롭 API 관련 기능소스 객체와 대상 객체가 무엇인지 설명한 후 프런트엔드의 드래그 앤 드롭 API로 돌아가서 위의 작업에서 몇 가지 기능을 파생시킬 수 있습니다.
드래그된 소스 객체에 의해 트리거될 수 있는 이벤트:
(1)ondragstart: 원본 개체가 드래그되기 시작합니다.
(2)ondrag: 원본 개체를 드래그하는 중입니다(마우스가 움직일 수도 있고 움직이지 않을 수도 있음).
(3)ondragend: 원본 개체를 끝으로 드래그합니다.
위의 대상 개체에 의해 트리거될 수 있는 이벤트를 입력하려면 소스 개체를 드래그하세요.
(1)ondragenter: 대상 개체를 원본 개체로 드래그합니다.
(2) ondragover: 대상 개체가 원본 개체에 의해 드래그되어 그 위에 마우스를 놓습니다.
(3)ondragleave: 원본 개체를 대상 개체에서 멀리 드래그합니다.
(4)ondrop: 소스 개체를 드래그하고 대상 개체 위로 놓거나 놓습니다.
드래그 앤 드롭 API에는 총 7가지 기능이 있습니다! !
5. 드래그 소스 객체 이벤트와 대상 객체 이벤트 간 데이터 전달 방법HTML5는 모든 드래그 관련 이벤트에 대해 새로운 속성을 제공합니다.
e.dataTransfer { } //数据传递对象
기능: 소스 개체와 대상 개체의 이벤트 간 데이터를 전달하는 데 사용됩니다.
소스 객체의 이벤트 핸들러에 데이터를 저장합니다.
e.dataTransfer.setData( k, v ); //kv必须都是string类型
대상 객체의 이벤트 핸들러에서 데이터를 읽습니다.
var v = e.dataTransfer.getData(k);
예시 1: 마우스를 드래그하면 움직일 수 있는 작은 비행기 구현
팁: 평면은 절대적인 위치에 있어야 합니다! ondrag 이벤트에서 마우스의 좌표값을 얻어옵니다! ! !
코드는 다음과 같습니다:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ 여백:0; 위치: 상대 }; </style> </head> <body> <h3>마우스를 드래그하면 움직이는 작은 평면</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('이벤트 소스 p3이 드래그를 시작합니다.'); //드래그 직후 평면에 마우스의 오프셋을 기록합니다. offsetX= e.offsetX; offsetY; .ondrag=function(e){ console.log('이벤트 소스 p3을 드래그 중입니다') var x= e.pageX; console.log(x+'-'+y); //드래그 이벤트 마지막 순간에 마우스 좌표를 읽을 수 없고, pageX와 pageY가 모두 0이 됩니다. if(x==0 && y==0 ){ return; // 드래그 마지막 순간에 X와 Y가 모두 0인 상황은 처리하지 않음} x-=offsetX; p3.style.left=x+'px'; 상단=y+'px' } p3.ondragend=function(){ console.log('소스 객체 p3 드래그 종료') } </script> </body> </html>효과는 다음과 같습니다.
예 2:
컴퓨터에서 휴지통 효과를 시뮬레이션합니다. 총 3개의 작은 평면이 표시됩니다. 작은 평면을 휴지통 상단으로 드래그하면 해당 작은 평면이 DOM 트리에서 삭제됩니다.
팁: 삭제하려면 DOM 하위 노드에서 요소를 제거해야 하며 ondragover의 기본 동작을 방지해야 합니다! ! 원본 개체와 대상 개체 간의 데이터 전송을 사용하여 소형 항공기의 ID 값을 기록하십시오! ! !
중요한 정보:
ondragover에는 기본 동작이 있습니다! ! ! ondragover가 트리거되면 ondrop이 실패합니다! ! ! ! 이는 브라우저 버전 문제일 수 있으며, 향후 브라우저가 지속적으로 업데이트되어야만 해결될 수 있습니다! !
그것을 멈추는 방법?
ondragover= function(e){ //소스 객체가 대상 객체 위로 마우스를 가져갈 때 e.preventDefault(); //드롭이 트리거될 수 있도록 기본 동작을 방지합니다...}ondrop= function(e){ // 소스 객체가 대상 객체에서 해제되었습니다...}코드는 다음과 같습니다:
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center } #trash { 불투명도: .2; : 15px; } </style> </head> <body> <h3>평면을 휴지통으로 드래그한 후 DOM 트리에서 하위 요소 삭제</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 클래스=src src=img/p3.png> <img id=p4 클래스=src src=img/p4.png> <img id=p5 클래스 =src src=img/p5.png> <script> //소스 객체에 대한 이벤트 모니터링 추가 - 어떤 소스 객체를 드래그했는지 기록 srcList = document.querySelectorAll('.src');//모든 img 요소 찾기 for(var i=0; i<srcList.length; i++){ //img 요소 트래버스 var p = srcList[i]; = function(e){ //소스 객체 드래그 시작 e.dataTransfer.setData('PlaneID',this.id) //데이터 저장-img 요소의 ID } p.ondrag = function(){} p.ondragend = function(){} } //대상 객체에 대한 이벤트 수신 대기 - 드래그된 소스 객체 삭제 Trash.ondragenter = function(){ //소스 객체가 대상에 들어갑니다. object console .log('drag enter'); waste.style.opacity = 1; //투명도를 1로 변경 } Trash.ondragleave= function(){ //소스 객체가 대상 객체를 떠난 후 console.log(' 드래그 휴가') ; Trash.style.opacity = .2; //투명도를 0.2로 변경 } Trash.ondragover= function(e){ //소스 객체가 대상 객체 위로 마우스를 가져갑니다. e.preventDefault(); //기본 동작을 방지합니다. drop Triggerable} 쓰레기.ondrop= function(e){ //대상 객체에서 소스 객체가 해제됩니다. console.log('drop'); 쓰레기.style.opacity = .2; //투명도를 0.2로 변경합니다. //드래그된 소스 객체 삭제 var id = e.dataTransfer.getData('PlaneID'); //데이터 가져오기--id 값 var p = document.getElementById(id) //id 값 p를 기준으로 관련 요소를 찾습니다. parentNode.removeChild(p); //상위 요소에서 하위 노드 제거} </script> </body> </html>효과는 다음과 같습니다.
삭제하려면 작은 평면을 휴지통으로 드래그한 후:
사진처럼 원래는 작은 비행기가 3개 있었는데 지금은 2개네요! ! !
6. 드래그 앤 드롭 API에 대한 보충 지식 포인트! ! (중요, 면접시 질문을 받을 수도 있습니다!!)면접 질문:
클라이언트(컴퓨터)의 사진을 웹 페이지에 표시하는 방법은 무엇입니까?
클라이언트의 웹 페이지를 드래그하여 서버 측 다운로드 페이지에 표시하는 방법은 무엇입니까?
이 두 질문은 무엇을 의미합니까?
우리는 일반적으로 다운로드 작업을 구현하기 위해 컴퓨터에서 브라우저로 사진을 드래그 앤 드롭합니다! ! ! H5 이전 표준에 따르면 이미지를 브라우저에 직접 드래그 앤 드롭하여 표시하는 것은 불가능합니다! ! 그런데 H5의 새로운 기능이 나오자 드래그 앤 드롭 API 기능이 추가되어 이 기능을 완벽하게 구현해냈습니다! ! !
신청 경우:
특정 웹사이트에 사진을 아바타로 업로드하세요.
사진 업로드...
HTML5의 새로운 파일 작업 개체:
File: 파일 객체를 나타냅니다.
FileList: 배열과 유사한 파일 목록 객체를 나타냅니다.
FileReader: 파일에서 데이터를 읽는 데 사용됩니다.
FileWriter: 파일에 데이터를 쓰는 데 사용됩니다.
관련 기능:
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //드래그 앤 드롭된 파일 찾기 var fr = new FileReader() //파일 리더 생성 fr.readAsURLData(f); //파일 내용 읽기 fr.onload = function(){ //읽기 완료 img.src = fr.result //읽은 데이터 사용} }코드는 다음과 같습니다:
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa; 테두리 반경: 3px; 여백: 10px; </style> </head> <body> <h1>드래그 앤 드롭 API에 대한 확장된 지식</h1> <h3>사진을 아래 상자 영역으로 드래그하세요</h3> <div id=container></ div > <script> //문서의 드롭 이벤트를 수신합니다. 기본 동작을 취소합니다. 새 창에서 이미지를 엽니다. document.ondragover = function(e){ e.preventDefault() //드롭 이벤트가 트리거되도록 활성화합니다. } document.ondrop = function(e){ e.preventDefault(); //이미지가 새 창에서 열리지 않도록 합니다. 그렇지 않으면 다운로드 작업이 계속 수행됩니다! ! ! } //div#container의 drop 이벤트를 수신하고, 릴리스된 이미지 데이터를 읽고 표시해 봅니다. .log ('클라이언트가 사진을 드래그해서 놓았네요...') //현재 대상 객체는 드래그 앤 드롭 소스 객체에 저장된 데이터를 읽습니다. //console.log(e.dataTransfer); //문제 표시 //console.log(e.dataTransfer.files.length); //끌어온 사진 수 var f0 = e.dataTransfer.files[0] //console.log(f0); /File object File //파일 객체에서 데이터 읽기 var fr = new FileReader(); //fr.readAsText(f0); //파일에서 텍스트 문자열 읽기 fr.readAsDataURL(f0); //파일에서 URL 데이터 읽기 fr.onload = function(){ console.log('파일 읽기 완료') console.log(fr.result) var img = new Image(); ; //URL 데이터 컨테이너.appendChild(img) } } </script> </body> </html></span>효과는 다음과 같습니다.
요약위 내용은 에디터가 소개한 HTML5 드래그 앤 드롭 API의 고전적인 예시에 대한 자세한 설명입니다. 궁금한 점이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해 드리겠습니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!