HTML DOM 드래그 이벤트

<시간/>

HTML DOM DragEvent는 선택한 텍스트를 드래그 앤 드롭할 때마다 실행되는 이벤트 유형입니다. 이 이벤트는 HTML5에서 도입되었습니다.

속성

다음은 HTML DOM DragEvent의 속성입니다 -

속성	설명
데이터 전송	사용자가 끌어다 놓는 데이터를 반환합니다.

구문

다음은 DragEvent −

의 구문입니다.

Object.DragEventType= function_name;

여기서 function_name은 실행 중인 이벤트에서 실행하고자 하는 함수입니다.

이벤트

다음은 DragEvent 객체에 속하는 이벤트 유형입니다 -

이벤트	설명
온드래그	요소를 드래그할 때 발생합니다.
온드라젠드	사용자가 요소 드래그를 완료하면 발생합니다.
온드라젠터	요소가 드래그된 후 놓기 대상에 들어갈 때 발생합니다.
ondragleave	요소가 드래그되는 동안 놓기 대상을 벗어날 때 발생합니다.
드래그오버	요소가 드래그되는 동안 놓기 대상 위에 있을 때 발생합니다.
ondragstart	사용자가 요소를 끌기 시작할 때 발생합니다.
온드롭	요소를 드래그한 후 놓기 대상에 놓을 때 발생합니다.

예시

<!DOCTYPE html>
<html>
<head>
<style>
   .DivDrop {
      float: left;
      width: 100px;
      height: 40px;
      margin:10px;
      border: 1px solid blue;
      background-color:lightgreen;
      font-weight:bold;
   }
</style>
</head>
<body>
<h2>DragEvent example</h2>
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
   document.ondragstart = function(event) {
      event.dataTransfer.setData("Text", "spanDrag");
      document.getElementById("spanDrag").innerText="drag Text";
      document.getElementById("spanDrag").style.backgroundColor="lightgreen";
   };
   document.ondrag = function(event) {
      document.getElementById("Sample").innerHTML = "Span element is being dragged";
   };
   document.ondragover = function(event) {
      event.preventDefault();
   };
   document.ondrop = function(event) {
      event.preventDefault();
      if(event.target.className=="DivDrop"){
         var txt = event.dataTransfer.getData("Text");
         event.target.appendChild(document.getElementById(txt));
         document.getElementById(txt).innerText="Dragged Text";
         document.getElementById(txt).style.backgroundColor="lightyellow";
         document.getElementById("Sample").innerHTML = "The span element is dropped";
      }
   };
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 드래그 이벤트

드래그할 때 "Drag This!" Text. "텍스트 드래그"로 변경됩니다.

HTML DOM 드래그 이벤트

두 번째 div에 "drag Text" 드롭 시 -

HTML DOM 드래그 이벤트

위의 예에서 -

먼저 "DivDrop"이라는 동일한 클래스 이름을 가진 두 개의 div 요소를 만들었습니다. 이 요소를 사용하면 둘 모두에 대해 공통 CSS 스타일을 사용할 수 있습니다. 첫 번째

요소에는 나중에 드래그할 요소가 포함되어 있습니다. −

.DivDrop {
   float: left;
   width: 100px;
   height: 40px;
   margin:10px;
   border: 1px solid blue;
   background-color:lightgreen;
   font-weight:bold;
}
<div class="DivDrop">
<span id="spanDrag" draggable="true">Drag This!</p>
</div>
<div class="DivDrop"></div>

그런 다음 이벤트가 발생할 때 실행할 여러 함수를 만들었습니다. 첫 번째 함수는 ondragstart 이벤트와 연결됩니다. 이 이벤트는 사용자가 텍스트를 드래그하기 시작할 때 발생합니다. 이 함수에는 드래그 데이터 유형과 데이터를 받는 setData() 메서드가 포함되어 있습니다. 여기서 유형은 "텍스트"이고 데이터는 요소 ID입니다.

태그와 연결된 ID를 찾으려면 event.target.id를 사용해야 합니다. 여기서는 단순함을 위해 이름을 사용했습니다 -

document.ondragstart = function(event) {
   event.dataTransfer.setData("Text", "spanDrag");
   document.getElementById("spanDrag").innerText="drag Text";
   document.getElementById("spanDrag").style.backgroundColor="lightgreen";
};

ondrag 이벤트와 관련된 함수는 ID를 가져온 후 innerHTML 속성을 사용하여

요소 텍스트를 "Span 요소가 드래그되고 있습니다"로 설정합니다. ondrag 이벤트는 사용자가 텍스트를 드래그할 때 발생합니다 -

Document.ondrag = function(event) {
   document.getElementById("Sample").innerHTML = "Span element is being dragged";
};

ondragover 이벤트와 관련된 함수는 event.preventDefault() 메서드를 사용하여 dragover에서 발생할 기본 동작을 중지합니다. dragover 이벤트는 드래그되는 요소가 의도한 대상 위에 있을 때 주기적으로 발생합니다. -

document.ondragover = function(event) {
   event.preventDefault();
};

ondrop 이벤트와 관련된 기능은 기본 작업이 발생하지 않도록 합니다. 그런 다음 의도한 대상이 두 번째

요소인지 확인합니다. 어떤 요소인지 확인하지 않고 웹 페이지의 모양에 영향을 줄 수 있는 페이지의 아무 곳에나 텍스트를 배치할 수 있습니다.

그런 다음 getData() 메서드를 사용하여 "텍스트" 유형에 대한 드래그 데이터를 가져옵니다. 이 요소는 우리의 경우 이고 두 번째 div의 자식으로 요소를 추가하고 변경 사항을 반영하기 위해 내부 텍스트, 배경색을 변경합니다 -

document.ondrop = function(event) {
   event.preventDefault();
   if(event.target.className=="DivDrop"){
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText="Dragged Text";
      document.getElementById(txt).style.backgroundColor="lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
   }