[javascript] 입력 폼에서 특정 요소의 드래그 앤 드롭 기능 추가하기
웹 애플리케이션에서 사용자 경험을 향상시키기 위해 드래그 앤 드롭 기능을 활용하는 것은 매우 유용합니다. 이 기능을 사용자 제한적으로 제공하고 싶다면 입력 폼에서 특정 요소에 대한 드래그 앤 드롭 기능을 추가할 수 있습니다.
HTML
가장 먼저, HTML에서는 드래그 앤 드롭을 적용할 요소를 정의하는 것으로 시작합니다.
<div id="draggableElement" draggable="true">드래그 가능한 요소</div>
<div id="dropZone">드롭 영역</div>
JavaScript
다음으로, JavaScript를 사용하여 드래그 앤 드롭 기능을 구현합니다.
const draggableElement = document.getElementById('draggableElement');
const dropZone = document.getElementById('dropZone');
draggableElement.addEventListener('dragstart', function (event) {
event.dataTransfer.setData('text/plain', '이 요소를 드래그');
});
dropZone.addEventListener('dragover', function (event) {
event.preventDefault();
});
dropZone.addEventListener('drop', function (event) {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
event.target.innerHTML = data + '하여 ' + event.target.id + '에 드롭';
});
위의 JavaScript 코드는 draggableElement를 드래그하고, dropZone으로 이동하여 드롭하는 동작을 정의합니다.
결론
드래그 앤 드롭 기능을 사용자가 입력하는 폼에 추가함으로써 사용자 경험을 개선할 수 있습니다. 위의 예제는 이러한 기능을 구현하는 간단한 방법을 보여줍니다. 각 요소에 dragstart, dragover, drop 이벤트를 추가하여 사용자가 요소를 드래그하고 드롭할 때 발생하는 동작을 정의할 수 있습니다.