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, alluninitialized.

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>

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