HTML5-드래그 앤 드롭

드래그 앤 드롭 (DnD)은 강력한 사용자 인터페이스 개념으로 마우스 클릭으로 항목을 쉽게 복사, 재정렬 및 삭제할 수 있습니다. 이를 통해 사용자는 요소 위에서 마우스 버튼을 클릭 한 상태에서 다른 위치로 드래그 한 다음 마우스 버튼을 놓아 요소를 드롭 할 수 있습니다.

기존 HTML4로 드래그 앤 드롭 기능을 구현하려면 개발자는 복잡한 JavaScript 프로그래밍 또는 jQuery 등과 같은 다른 JavaScript 프레임 워크를 사용해야합니다.

이제 HTML 5는 브라우저에 기본 DnD 지원을 제공하는 드래그 앤 드롭 (DnD) API를 제공하여 훨씬 쉽게 코딩 할 수 있습니다.

HTML 5 DnD는 Chrome, Firefox 3.5 및 Safari 4 등과 같은 모든 주요 브라우저에서 지원됩니다.

드래그 앤 드롭 이벤트

드래그 앤 드롭 작업의 다양한 단계에서 발생하는 많은 이벤트가 있습니다. 이러한 이벤트는 다음과 같습니다.

Sr. 아니.	이벤트 및 설명
1	dragstart 사용자가 개체 드래그를 시작하면 실행됩니다.
2	dragenter 드래그가 발생하는 동안 마우스가 대상 요소 위로 처음 이동하면 시작됩니다. 이 이벤트의 리스너는이 위치에서 드롭이 허용되는지 여부를 나타내야합니다. 리스너가 없거나 리스너가 작업을 수행하지 않는 경우 기본적으로 드롭이 허용되지 않습니다.
삼	dragover 이 이벤트는 드래그가 발생할 때 요소 위로 마우스를 이동하면 시작됩니다. 대부분의 경우 리스너 중에 발생하는 작업은 dragenter 이벤트와 동일합니다.
4	dragleave 이 이벤트는 드래그가 발생하는 동안 마우스가 요소를 떠날 때 시작됩니다. 청취자는 드롭 피드백에 사용되는 강조 표시 또는 삽입 마커를 제거해야합니다.
5	drag 개체가 드래그되는 동안 마우스가 움직일 때마다 발생합니다.
6	drop 드래그 작업이 끝날 때 드롭이 발생한 요소에서 드롭 이벤트가 시작됩니다. 리스너는 드래그되는 데이터를 검색하여 드롭 위치에 삽입해야합니다.
7	dragend 사용자가 개체를 드래그하는 동안 마우스 버튼을 놓을 때 발생합니다.

Note− 드래그 이벤트 만 발생합니다. mousemove 와 같은 마우스 이벤트 는 드래그 작업 중에 발생하지 않습니다.

DataTransfer 객체

모든 드래그 앤 드롭 이벤트에 대한 이벤트 리스너 메서드는 Event 읽기 전용 속성이있는 객체 dataTransfer.

그만큼 event.dataTransfer 보고 DataTransfer 다음과 같이 이벤트와 관련된 객체-

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

의 dataTransfer의 객체는 드래그 앤 드롭 작업에 대한 데이터를 보유하고 있습니다. 이 데이터는 아래 설명 된 바와 같이 DataTransfer 객체와 관련된 다양한 속성의 관점에서 검색 및 설정할 수 있습니다.

Sr. 아니.	DataTransfer 속성 및 설명
1	dataTransfer.dropEffect [ = value ] 현재 선택된 작업의 종류를 반환합니다. 이 속성을 설정하여 선택한 작업을 변경할 수 있습니다. 가능한 값은 없음, 복사, 연결 및 이동입니다.
2	dataTransfer.effectAllowed [ = value ] 허용되는 작업의 종류를 반환합니다. 이 속성을 설정하여 허용 된 작업을 변경할 수 있습니다. 가능한 값은 다음과 같습니다. none, copy, copyLink, copyMove, link, linkMove, move, all 과 uninitialized.
삼	dataTransfer.types dragstart 이벤트에 설정된 형식을 나열하는 DOMStringList를 반환합니다. 또한 드래그되는 파일이있는 경우 유형 중 하나가 "Files"문자열이됩니다.
4	dataTransfer.clearData ( [ format ] ) 지정된 형식의 데이터를 제거합니다. 인수가 생략 된 경우 모든 데이터를 제거합니다.
5	dataTransfer.setData(format, data) 지정된 데이터를 추가합니다.
6	data = dataTransfer.getData(format) 지정된 데이터를 반환합니다. 그러한 데이터가 없으면 빈 문자열을 반환합니다.
7	dataTransfer.files 드래그되는 파일의 FileList를 반환합니다.
8	dataTransfer.setDragImage(element, x, y) 지정된 요소를 사용하여 드래그 피드백을 업데이트하고 이전에 지정된 피드백을 대체합니다.
9	dataTransfer.addElement(element) 드래그 피드백을 렌더링하는 데 사용되는 요소 목록에 지정된 요소를 추가합니다.

드래그 앤 드롭 프로세스

다음은 드래그 앤 드롭 작업을 구현하기 위해 수행해야 할 단계입니다.

1 단계-개체를 드래그 가능하게 만들기

취해야 할 단계는 다음과 같습니다.

요소를 드래그하려면 draggable 속성 true 해당 요소에 대해.
이벤트 리스너 설정 dragstart 드래그되는 데이터를 저장합니다.
이벤트 리스너 dragstart 허용되는 효과 (복사, 이동, 링크 또는 일부 조합)를 설정합니다.

다음은 드래그 할 수있는 개체를 만드는 예입니다.

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

이것은 다음 결과를 생성합니다-

2 단계-개체 놓기

드롭을 수락하려면 드롭 대상이 최소 3 개의 이벤트를 수신해야합니다.

그만큼 dragenter드롭 대상이 드롭을 수락할지 여부를 결정하는 데 사용되는 이벤트입니다. 드롭을 수락하려면이 이벤트를 취소해야합니다.
그만큼 dragover사용자에게 표시 할 피드백을 결정하는 데 사용되는 이벤트입니다. 이벤트가 취소되면 dropEffect 속성 값에 따라 피드백 (일반적으로 커서)이 업데이트됩니다.
마지막으로 drop 이벤트, 실제 드롭을 수행 할 수 있습니다.

다음은 객체를 다른 객체에 드롭하는 예입니다.

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

이것은 다음 결과를 생성합니다-