[javascript] 드래그 앤 드롭 기능을 적용한 예제 코드와 결과 확인
개요
이번 예제에서는 JavaScript를 사용하여 웹 페이지에 드래그 앤 드롭 기능을 적용하는 방법을 알아보겠습니다. 드래그 앤 드롭은 사용자가 마우스로 요소를 클릭하여 이동시키는 인터랙티브한 기능으로, 웹 애플리케이션에서 많이 사용됩니다.
예제 코드
다음은 드래그 앤 드롭 기능을 적용한 예제 코드입니다.
// HTML 요소를 드래그하는 함수
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
// 드롭하는 함수
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
}
// 드롭을 허용하는 함수
function allowDrop(event) {
event.preventDefault();
}
위의 코드는 drag(event), drop(event), allowDrop(event) 3개의 함수를 정의하고 있습니다. drag(event) 함수는 드래그 이벤트가 발생했을 때 호출되는 함수로, 해당 요소의 id를 데이터로 설정합니다. drop(event) 함수는 드롭 이벤트가 발생했을 때 호출되는 함수로, 데이터를 가져와서 드롭을 수행합니다. allowDrop(event) 함수는 드롭을 허용하는 함수로, 드롭 이벤트를 막지 않고 허용합니다.
결과 확인
위 예제 코드를 웹 페이지에 적용하면, 드래그 앤 드롭 기능을 확인할 수 있습니다. 예제 코드에는 HTML 요소를 드래그하여 다른 요소 위에 드롭하는 동작을 구현하였습니다.
실제 동작을 확인하기 위해서는 HTML 파일에 스타일 및 이벤트 핸들러를 추가하여 웹 페이지에 렌더링해야 합니다. 자세한 내용은 깔끔한 코드 블로그의 “HTML5 Drag and Drop API 활용하여 드래그 앤 드롭 기능 구현하기” 포스트를 참고하시기 바랍니다.